/* =========================================================
   LITTLE EXPLORERS LEARNING HUB
   PRE KINDERGARTEN | AGES 4–5 YEARS

   FILE:
   styles/ages-4-5.css

   COMPLETE STANDALONE STYLESHEET

   This stylesheet is designed specifically for:
   4-5.html

   It does NOT depend on styles.css.
========================================================= */


/* =========================================================
   01. PRE KINDERGARTEN COLOR SYSTEM
========================================================= */

:root {

    /* ------------------------------------------
       PRIMARY PRE KINDERGARTEN COLORS
    ------------------------------------------ */

    --prek-blue: #5B8DB8;
    --prek-soft-blue: #EAF3FA;
    --prek-deep-blue: #315E82;

    --prek-green: #7FAF78;
    --prek-soft-green: #EEF7EC;
    --prek-deep-green: #4F7F4B;

    --prek-gold: #E5B85C;
    --prek-soft-gold: #FFF7E2;
    --prek-deep-gold: #9A721E;

    --prek-coral: #D98270;
    --prek-soft-coral: #FFF0EC;
    --prek-deep-coral: #9D5143;

    --prek-purple: #9184C4;
    --prek-soft-purple: #F2EFFA;
    --prek-deep-purple: #62558F;

    --prek-teal: #5DA9A1;
    --prek-soft-teal: #E9F6F4;
    --prek-deep-teal: #367A74;

    --prek-orange: #E49A5A;
    --prek-soft-orange: #FFF2E5;
    --prek-deep-orange: #A86224;


    /* ------------------------------------------
       NEUTRALS
    ------------------------------------------ */

    --prek-white: #FFFFFF;

    --prek-cream: #FFFCF6;

    --prek-warm-white: #FEFDFC;

    --prek-navy: #294858;

    --prek-soft-navy: #536B77;

    --prek-text: #435A66;

    --prek-text-light: #73838B;


    /* ------------------------------------------
       BORDERS
    ------------------------------------------ */

    --prek-border: #DEE7E8;

    --prek-border-light: #EBF0F0;


    /* ------------------------------------------
       SHADOWS
    ------------------------------------------ */

    --prek-shadow-soft:
        0 8px 24px
        rgba(41, 72, 88, 0.07);

    --prek-shadow-card:
        0 12px 30px
        rgba(41, 72, 88, 0.10);

    --prek-shadow-hover:
        0 18px 38px
        rgba(41, 72, 88, 0.15);


    /* ------------------------------------------
       TRANSITION
    ------------------------------------------ */

    --prek-transition:
        0.25s ease;

}


/* =========================================================
   02. RESET
========================================================= */

* {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


html {

    scroll-behavior:
        smooth;

}


body {

    min-height:
        100vh;

    font-family:
        "Inter",
        sans-serif;

    background:
        var(--prek-warm-white);

    color:
        var(--prek-text);

    line-height:
        1.6;

}


/* =========================================================
   03. GLOBAL ELEMENTS
========================================================= */

img {

    display:
        block;

    max-width:
        100%;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
input {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


ul {

    list-style:
        none;

}


/* =========================================================
   04. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {

    font-family:
        "Nunito",
        sans-serif;

    color:
        var(--prek-navy);

    line-height:
        1.2;

}


h1 {

    font-size:
        clamp(2.4rem, 5vw, 4.4rem);

}


h2 {

    font-size:
        clamp(1.9rem, 3vw, 2.8rem);

}


h3 {

    font-size:
        1.35rem;

}


h4 {

    font-size:
        1.05rem;

}


p {

    color:
        var(--prek-text);

}


/* =========================================================
   05. TEXT SELECTION
========================================================= */

::selection {

    background:
        var(--prek-gold);

    color:
        var(--prek-navy);

}


/* =========================================================
   06. MAIN CONTAINER
========================================================= */

.container {

    width:
        min(1180px, calc(100% - 40px));

    margin:
        0 auto;

}


/* =========================================================
   07. SECTION FOUNDATION
========================================================= */

section {

    padding:
        82px 0;

}


.section-title {

    max-width:
        780px;

    margin:
        0 auto 46px;

    text-align:
        center;

}


.section-title h2 {

    margin-bottom:
        15px;

}


.section-title p {

    color:
        var(--prek-text-light);

    font-size:
        1.04rem;

    line-height:
        1.75;

}


/* =========================================================
   08. ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible {

    outline:
        3px solid var(--prek-gold);

    outline-offset:
        3px;

}


/* =========================================================
   09. SMOOTH CARD BEHAVIOR
========================================================= */

.study-card,
.material-card,
.question-card,
.book-card,
.song-card,
.dashboard-card,
.family-card,
.newsletter-box {

    transition:
        transform var(--prek-transition),
        box-shadow var(--prek-transition),
        border-color var(--prek-transition);

}

/* =========================================================
   10. HEADER
========================================================= */

header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    width:
        100%;

    background:
        rgba(254, 253, 252, 0.97);

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

    box-shadow:
        0 4px 18px rgba(41, 72, 88, 0.07);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


/* =========================================================
   11. NAVIGATION CONTAINER
========================================================= */

.nav-container {

    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    gap:
        24px;

}


/* =========================================================
   12. LOGO
========================================================= */

.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;

}


.logo img {

    width:
        52px;

    height:
        52px;

    object-fit:
        contain;

    border-radius:
        50%;

}


.logo div {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;

}


.logo h1 {

    margin:
        0;

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1.25rem;

    font-weight:
        800;

    color:
        var(--prek-navy);

}


.logo span {

    margin-top:
        5px;

    font-size:
        0.78rem;

    font-weight:
        600;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        var(--prek-deep-green);

}


/* =========================================================
   13. SEARCH BAR
========================================================= */

.search-bar {

    display:
        flex;

    align-items:
        center;

    flex:
        1;

    max-width:
        420px;

    margin-left:
        auto;

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

    border-radius:
        999px;

    overflow:
        hidden;

    background:
        var(--prek-white);

    box-shadow:
        0 4px 14px rgba(41, 72, 88, 0.04);

}


.search-bar input {

    width:
        100%;

    min-width:
        0;

    padding:
        11px 15px;

    border:
        none;

    outline:
        none;

    background:
        transparent;

    color:
        var(--prek-text);

    font-size:
        0.88rem;

}


.search-bar input::placeholder {

    color:
        var(--prek-text-light);

}


.search-bar:focus-within {

    border-color:
        var(--prek-teal);

    box-shadow:
        0 0 0 3px rgba(93, 169, 161, 0.14);

}


.search-bar button {

    width:
        46px;

    min-width:
        46px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        none;

    background:
        var(--prek-teal);

    color:
        var(--prek-white);

    font-size:
        1rem;

    transition:
        background var(--prek-transition),
        transform var(--prek-transition);

}


.search-bar button:hover {

    background:
        var(--prek-deep-teal);

}


.search-bar button:active {

    transform:
        scale(0.96);

}


/* =========================================================
   14. MAIN NAVIGATION
========================================================= */

nav {

    flex-shrink:
        0;

}


nav ul {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

}


nav li {

    position:
        relative;

}


nav a {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        9px 11px;

    border-radius:
        9px;

    color:
        var(--prek-soft-navy);

    font-size:
        0.84rem;

    font-weight:
        600;

    white-space:
        nowrap;

    transition:
        background var(--prek-transition),
        color var(--prek-transition),
        transform var(--prek-transition);

}


nav a:hover {

    background:
        var(--prek-soft-blue);

    color:
        var(--prek-deep-blue);

}


nav a:active {

    transform:
        translateY(1px);

}


nav a.active {

    background:
        var(--prek-soft-gold);

    color:
        var(--prek-deep-gold);

    box-shadow:
        0 3px 9px rgba(154, 114, 30, 0.10);

}


/* =========================================================
   15. MOBILE MENU BUTTON
========================================================= */

.mobile-menu {

    display:
        none;

    width:
        44px;

    height:
        44px;

    flex-shrink:
        0;

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

    border-radius:
        10px;

    background:
        var(--prek-soft-teal);

    color:
        var(--prek-navy);

    font-size:
        1.25rem;

    transition:
        background var(--prek-transition),
        color var(--prek-transition),
        transform var(--prek-transition);

}


.mobile-menu:hover {

    background:
        var(--prek-teal);

    color:
        var(--prek-white);

}


.mobile-menu:active {

    transform:
        scale(0.95);

}


/* =========================================================
   16. HERO / STUDY BANNER
========================================================= */

.study-banner {

    position:
        relative;

    overflow:
        hidden;

    padding:
        92px 0;

    background:
        linear-gradient(
            135deg,
            var(--prek-soft-gold) 0%,
            var(--prek-soft-green) 45%,
            var(--prek-soft-blue) 100%
        );

}


.study-banner::before {

    content:
        "";

    position:
        absolute;

    width:
        320px;

    height:
        320px;

    top:
        -150px;

    right:
        -100px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.38);

    pointer-events:
        none;

}


.study-banner::after {

    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    bottom:
        -120px;

    left:
        -70px;

    border-radius:
        50%;

    background:
        rgba(229, 184, 92, 0.10);

    pointer-events:
        none;

}


/* =========================================================
   17. HERO GRID
========================================================= */

.study-banner-grid {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.95fr);

    align-items:
        center;

    gap:
        64px;

}


/* =========================================================
   18. HERO CONTENT
========================================================= */

.study-banner-grid > div:first-child {

    max-width:
        690px;

}


.study-banner h1 {

    margin:
        16px 0 20px;

    color:
        var(--prek-navy);

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

    letter-spacing:
        -0.025em;

}


.study-banner p {

    max-width:
        680px;

    color:
        var(--prek-soft-navy);

    font-size:
        1.08rem;

    line-height:
        1.8;

}


/* =========================================================
   19. STUDY LABEL
========================================================= */

.study-label {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        7px 14px;

    border:
        1px solid rgba(154, 114, 30, 0.16);

    border-radius:
        999px;

    background:
        var(--prek-gold);

    color:
        var(--prek-navy);

    font-size:
        0.78rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

}


/* =========================================================
   20. HERO BUTTON GROUP
========================================================= */

.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        13px;

    margin-top:
        30px;

}


/* =========================================================
   21. GLOBAL BUTTON FOUNDATION
========================================================= */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        12px 20px;

    border:
        1px solid transparent;

    border-radius:
        10px;

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        0.92rem;

    font-weight:
        800;

    line-height:
        1.2;

    transition:
        transform var(--prek-transition),
        background var(--prek-transition),
        color var(--prek-transition),
        border-color var(--prek-transition),
        box-shadow var(--prek-transition);

}


.btn:hover {

    transform:
        translateY(-2px);

}


.btn:active {

    transform:
        translateY(0);

}


/* =========================================================
   22. PRIMARY BUTTON
========================================================= */

.btn-primary {

    background:
        var(--prek-teal);

    color:
        var(--prek-white);

    box-shadow:
        0 7px 17px rgba(54, 122, 116, 0.16);

}


.btn-primary:hover {

    background:
        var(--prek-deep-teal);

    color:
        var(--prek-white);

    box-shadow:
        0 10px 22px rgba(54, 122, 116, 0.20);

}


/* =========================================================
   23. SECONDARY BUTTON
========================================================= */

.btn-secondary {

    background:
        var(--prek-white);

    color:
        var(--prek-navy);

    border-color:
        var(--prek-border);

    box-shadow:
        0 5px 14px rgba(41, 72, 88, 0.06);

}


.btn-secondary:hover {

    background:
        var(--prek-soft-coral);

    color:
        var(--prek-deep-coral);

    border-color:
        var(--prek-coral);

}


/* =========================================================
   24. HERO IMAGE
========================================================= */

.study-banner-grid > div:last-child {

    position:
        relative;

}


.study-banner-grid > div:last-child::before {

    content:
        "";

    position:
        absolute;

    inset:
        -14px;

    border-radius:
        28px;

    background:
        rgba(255, 255, 255, 0.38);

    transform:
        rotate(2deg);

    z-index:
        0;

}


.study-banner-grid > div:last-child img {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

    border:
        7px solid rgba(255, 255, 255, 0.90);

    border-radius:
        24px;

    box-shadow:
        0 18px 40px rgba(41, 72, 88, 0.16);

    transition:
        transform var(--prek-transition),
        box-shadow var(--prek-transition);

}


.study-banner-grid > div:last-child img:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 24px 48px rgba(41, 72, 88, 0.20);

}


/* =========================================================
   25. HERO IMAGE SAFETY
========================================================= */

.study-banner-grid > div:last-child {

    min-width:
        0;

}


.study-banner-grid > div:last-child img {

    min-width:
        0;

}

/* =========================================================
   26. LEARNING FOCUS / DEVELOPMENT DASHBOARD
========================================================= */

.study-dashboard {

    position:
        relative;

    overflow:
        hidden;

    padding:
        82px 0;

    background:
        var(--prek-navy);

    color:
        var(--prek-white);

}


.study-dashboard::before {

    content:
        "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    top:
        -190px;

    right:
        -100px;

    border-radius:
        50%;

    background:
        rgba(93, 169, 161, 0.12);

    pointer-events:
        none;

}


.study-dashboard::after {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    bottom:
        -170px;

    left:
        -100px;

    border-radius:
        50%;

    background:
        rgba(229, 184, 92, 0.08);

    pointer-events:
        none;

}


/* =========================================================
   27. DASHBOARD CONTENT
========================================================= */

.study-dashboard .container {

    position:
        relative;

    z-index:
        1;

}


.study-dashboard h2 {

    margin-bottom:
        14px;

    color:
        var(--prek-white);

    font-size:
        clamp(2rem, 3.5vw, 2.9rem);

}


.study-dashboard > .container > p {

    max-width:
        760px;

    margin-bottom:
        38px;

    color:
        rgba(255, 255, 255, 0.78);

    font-size:
        1.03rem;

    line-height:
        1.75;

}


/* =========================================================
   28. DASHBOARD GRID
========================================================= */

.dashboard-grid {

    display:
        grid;

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

    gap:
        16px;

}


/* =========================================================
   29. DASHBOARD CARDS
========================================================= */

.dashboard-card {

    position:
        relative;

    min-height:
        150px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    padding:
        26px 22px;

    overflow:
        hidden;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius:
        16px;

    background:
        rgba(255, 255, 255, 0.075);

    color:
        var(--prek-white);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.08);

    transition:
        transform var(--prek-transition),
        background var(--prek-transition),
        border-color var(--prek-transition),
        box-shadow var(--prek-transition);

}


/* =========================================================
   30. DASHBOARD CARD ACCENT
========================================================= */

.dashboard-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        5px;

    background:
        var(--prek-teal);

}


.dashboard-card:nth-child(1)::before {

    background:
        var(--prek-blue);

}


.dashboard-card:nth-child(2)::before {

    background:
        var(--prek-gold);

}


.dashboard-card:nth-child(3)::before {

    background:
        var(--prek-green);

}


.dashboard-card:nth-child(4)::before {

    background:
        var(--prek-orange);

}


.dashboard-card:nth-child(5)::before {

    background:
        var(--prek-coral);

}


.dashboard-card:nth-child(6)::before {

    background:
        var(--prek-purple);

}


.dashboard-card:nth-child(7)::before {

    background:
        var(--prek-teal);

}


.dashboard-card:nth-child(8)::before {

    background:
        var(--prek-blue);

}


/* =========================================================
   31. DASHBOARD CARD ICON
========================================================= */

.dashboard-card {

    font-size:
        1.8rem;

}


.dashboard-card h3 {

    margin-top:
        12px;

    color:
        var(--prek-white);

    font-size:
        1.05rem;

}


/* =========================================================
   32. DASHBOARD CARD HOVER
========================================================= */

.dashboard-card:hover {

    transform:
        translateY(-5px);

    background:
        rgba(255, 255, 255, 0.13);

    border-color:
        rgba(255, 255, 255, 0.23);

    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.15);

}


/* =========================================================
   33. STUDY LIBRARY
========================================================= */

.study-library {

    padding:
        88px 0;

    background:
        var(--prek-warm-white);

}


/* =========================================================
   34. STUDY LIBRARY TITLE
========================================================= */

.study-library .section-title {

    margin-bottom:
        48px;

}


.study-library .section-title h2 {

    color:
        var(--prek-navy);

}


.study-library .section-title p {

    color:
        var(--prek-text-light);

}


/* =========================================================
   35. STUDY GRID
========================================================= */

.study-grid {

    display:
        grid;

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

    gap:
        24px;

    align-items:
        stretch;

}


/* =========================================================
   36. STUDY CARD
========================================================= */

.study-card {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    overflow:
        hidden;

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

    border-radius:
        18px;

    background:
        var(--prek-white);

    box-shadow:
        var(--prek-shadow-soft);

    transition:
        transform var(--prek-transition),
        box-shadow var(--prek-transition),
        border-color var(--prek-transition);

}


.study-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--prek-border);

    box-shadow:
        var(--prek-shadow-hover);

}


/* =========================================================
   37. STUDY CARD IMAGE
========================================================= */

.study-card > img {

    width:
        100%;

    height:
        220px;

    object-fit:
        cover;

    background:
        var(--prek-soft-blue);

    transition:
        transform 0.35s ease;

}


.study-card:hover > img {

    transform:
        scale(1.035);

}


/* =========================================================
   38. STUDY CONTENT
========================================================= */

.study-content {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        24px;

}


.study-content h3 {

    margin:
        11px 0 10px;

    color:
        var(--prek-navy);

    font-size:
        1.45rem;

}


.study-content p {

    margin-bottom:
        20px;

    color:
        var(--prek-text);

    font-size:
        0.95rem;

    line-height:
        1.7;

}


/* =========================================================
   39. STUDY TAGS
========================================================= */

.study-tag {

    display:
        inline-flex;

    align-self:
        flex-start;

    align-items:
        center;

    min-height:
        28px;

    padding:
        5px 11px;

    border-radius:
        999px;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

}


/* =========================================================
   40. STUDY TAG — GREEN
========================================================= */

.study-tag.green {

    background:
        var(--prek-soft-green);

    color:
        var(--prek-deep-green);

}


/* =========================================================
   41. STUDY TAG — ORANGE
========================================================= */

.study-tag.orange {

    background:
        var(--prek-soft-orange);

    color:
        var(--prek-deep-orange);

}


/* =========================================================
   42. STUDY TAG — AQUA
========================================================= */

.study-tag.aqua {

    background:
        var(--prek-soft-teal);

    color:
        var(--prek-deep-teal);

}


/* =========================================================
   43. STUDY TAG — BLUE
========================================================= */

.study-tag.blue {

    background:
        var(--prek-soft-blue);

    color:
        var(--prek-deep-blue);

}


/* =========================================================
   44. STUDY STATISTICS
========================================================= */

.study-stats {

    display:
        grid;

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

    gap:
        8px;

    margin-top:
        auto;

    padding:
        16px 0;

    border-top:
        1px solid var(--prek-border-light);

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

}


.study-stats > div {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        0;

    text-align:
        center;

}


.study-stats strong {

    display:
        block;

    color:
        var(--prek-navy);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1.05rem;

    font-weight:
        800;

}


.study-stats span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--prek-text-light);

    font-size:
        0.72rem;

    font-weight:
        600;

}


/* =========================================================
   45. STUDY BUTTON
========================================================= */

.study-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        46px;

    margin-top:
        18px;

    padding:
        11px 16px;

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

    border-radius:
        10px;

    background:
        var(--prek-soft-blue);

    color:
        var(--prek-deep-blue);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        0.9rem;

    font-weight:
        800;

    transition:
        background var(--prek-transition),
        color var(--prek-transition),
        border-color var(--prek-transition),
        transform var(--prek-transition);

}


.study-button:hover {

    background:
        var(--prek-deep-blue);

    border-color:
        var(--prek-deep-blue);

    color:
        var(--prek-white);

    transform:
        translateY(-2px);

}


/* =========================================================
   46. STUDY BUTTON COLOR VARIATIONS
========================================================= */

.study-card:nth-child(1) .study-button {

    background:
        var(--prek-soft-green);

    color:
        var(--prek-deep-green);

}


.study-card:nth-child(1) .study-button:hover {

    background:
        var(--prek-deep-green);

    color:
        var(--prek-white);

}


.study-card:nth-child(2) .study-button {

    background:
        var(--prek-soft-orange);

    color:
        var(--prek-deep-orange);

}


.study-card:nth-child(2) .study-button:hover {

    background:
        var(--prek-deep-orange);

    color:
        var(--prek-white);

}


.study-card:nth-child(3) .study-button {

    background:
        var(--prek-soft-teal);

    color:
        var(--prek-deep-teal);

}


.study-card:nth-child(3) .study-button:hover {

    background:
        var(--prek-deep-teal);

    color:
        var(--prek-white);

}


.study-card:nth-child(4) .study-button {

    background:
        var(--prek-soft-green);

    color:
        var(--prek-deep-green);

}


.study-card:nth-child(4) .study-button:hover {

    background:
        var(--prek-deep-green);

    color:
        var(--prek-white);

}


.study-card:nth-child(5) .study-button {

    background:
        var(--prek-soft-orange);

    color:
        var(--prek-deep-orange);

}


.study-card:nth-child(5) .study-button:hover {

    background:
        var(--prek-deep-orange);

    color:
        var(--prek-white);

}


.study-card:nth-child(6) .study-button {

    background:
        var(--prek-soft-blue);

    color:
        var(--prek-deep-blue);

}


.study-card:nth-child(6) .study-button:hover {

    background:
        var(--prek-deep-blue);

    color:
        var(--prek-white);

}


/* =========================================================
   47. STUDY CARD KEYBOARD FOCUS
========================================================= */

.study-card:focus-within {

    border-color:
        var(--prek-teal);

    box-shadow:
        0 0 0 3px rgba(93, 169, 161, 0.15),
        var(--prek-shadow-card);

}


/* =========================================================
   48. STUDY CARD IMAGE FALLBACK
========================================================= */

.study-card > img {

    background:
        linear-gradient(
            135deg,
            var(--prek-soft-blue),
            var(--prek-soft-green)
        );

}


/* =========================================================
   49. STUDY GRID CARD BALANCE
========================================================= */

.study-content h3 {

    min-height:
        35px;

}


.study-content p {

    min-height:
        82px;

}

/* =========================================================
   50. KINDERGARTEN READINESS SECTION
========================================================= */

.materials-section {

    position:
        relative;

    overflow:
        hidden;

    padding:
        88px 0;

    background:
        var(--prek-soft-green);

}


/* =========================================================
   51. MATERIALS SECTION DECORATION
========================================================= */

.materials-section::before {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    top:
        -150px;

    right:
        -90px;

    border-radius:
        50%;

    background:
        rgba(91, 141, 184, 0.08);

    pointer-events:
        none;

}


.materials-section::after {

    content:
        "";

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    bottom:
        -130px;

    left:
        -80px;

    border-radius:
        50%;

    background:
        rgba(229, 184, 92, 0.10);

    pointer-events:
        none;

}


/* =========================================================
   52. MATERIALS CONTENT
========================================================= */

.materials-section .container {

    position:
        relative;

    z-index:
        1;

}


/* =========================================================
   53. MATERIALS TITLE
========================================================= */

.materials-section .section-title {

    margin-bottom:
        46px;

}


.materials-section .section-title h2 {

    color:
        var(--prek-navy);

}


.materials-section .section-title p {

    color:
        var(--prek-text-light);

}


/* =========================================================
   54. MATERIALS GRID
========================================================= */

.materials-grid {

    display:
        grid;

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

    gap:
        18px;

}


/* =========================================================
   55. MATERIAL CARD
========================================================= */

.material-card {

    position:
        relative;

    min-height:
        118px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px 18px;

    overflow:
        hidden;

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

    border-top:
        5px solid var(--prek-blue);

    border-radius:
        15px;

    background:
        var(--prek-white);

    color:
        var(--prek-navy);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1rem;

    font-weight:
        800;

    line-height:
        1.35;

    text-align:
        center;

    box-shadow:
        var(--prek-shadow-soft);

    transition:
        transform var(--prek-transition),
        box-shadow var(--prek-transition),
        border-color var(--prek-transition);

}


/* =========================================================
   56. MATERIAL CARD INNER GLOW
========================================================= */

.material-card::after {

    content:
        "";

    position:
        absolute;

    width:
        90px;

    height:
        90px;

    right:
        -42px;

    bottom:
        -42px;

    border-radius:
        50%;

    background:
        rgba(91, 141, 184, 0.08);

    pointer-events:
        none;

}


/* =========================================================
   57. MATERIAL CARD HOVER
========================================================= */

.material-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--prek-shadow-hover);

}


/* =========================================================
   58. MATERIAL CARD COLORS
========================================================= */

.material-card:nth-child(1) {

    border-top-color:
        var(--prek-blue);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-blue),
            var(--prek-white)
        );

}


.material-card:nth-child(2) {

    border-top-color:
        var(--prek-purple);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-purple),
            var(--prek-white)
        );

}


.material-card:nth-child(3) {

    border-top-color:
        var(--prek-gold);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-gold),
            var(--prek-white)
        );

}


.material-card:nth-child(4) {

    border-top-color:
        var(--prek-green);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-green),
            var(--prek-white)
        );

}


.material-card:nth-child(5) {

    border-top-color:
        var(--prek-coral);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-coral),
            var(--prek-white)
        );

}


.material-card:nth-child(6) {

    border-top-color:
        var(--prek-teal);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-teal),
            var(--prek-white)
        );

}


.material-card:nth-child(7) {

    border-top-color:
        var(--prek-orange);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-orange),
            var(--prek-white)
        );

}


.material-card:nth-child(8) {

    border-top-color:
        var(--prek-blue);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-blue),
            var(--prek-white)
        );

}


/* =========================================================
   59. MATERIAL CARD FOCUS
========================================================= */

.material-card:focus-within {

    border-color:
        var(--prek-teal);

    box-shadow:
        0 0 0 3px rgba(93, 169, 161, 0.14),
        var(--prek-shadow-card);

}


/* =========================================================
   60. ESSENTIAL QUESTIONS SECTION
========================================================= */

section:not(
    .study-banner,
    .study-dashboard,
    .study-library,
    .materials-section,
    .books-section,
    .newsletter,
    #family,
    footer
) {

    background:
        var(--prek-warm-white);

}


/* =========================================================
   61. ESSENTIAL QUESTIONS TITLE
========================================================= */

.question-grid {

    display:
        grid;

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

    gap:
        20px;

}


/* =========================================================
   62. QUESTION CARD
========================================================= */

.question-card {

    position:
        relative;

    min-height:
        145px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        28px 24px;

    overflow:
        hidden;

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

    border-left:
        5px solid var(--prek-blue);

    border-radius:
        16px;

    background:
        var(--prek-white);

    color:
        var(--prek-navy);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1.05rem;

    font-weight:
        800;

    line-height:
        1.45;

    text-align:
        center;

    box-shadow:
        var(--prek-shadow-soft);

    transition:
        transform var(--prek-transition),
        box-shadow var(--prek-transition),
        border-color var(--prek-transition);

}


/* =========================================================
   63. QUESTION CARD DECORATIVE CIRCLE
========================================================= */

.question-card::after {

    content:
        "?";

    position:
        absolute;

    right:
        -8px;

    bottom:
        -25px;

    width:
        75px;

    height:
        75px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--prek-soft-blue);

    color:
        rgba(49, 94, 130, 0.28);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        2rem;

    font-weight:
        800;

}


/* =========================================================
   64. QUESTION CARD HOVER
========================================================= */

.question-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--prek-shadow-hover);

}


/* =========================================================
   65. QUESTION CARD COLOR VARIATIONS
========================================================= */

.question-card:nth-child(1) {

    border-left-color:
        var(--prek-blue);

}


.question-card:nth-child(1)::after {

    background:
        var(--prek-soft-blue);

}


.question-card:nth-child(2) {

    border-left-color:
        var(--prek-green);

}


.question-card:nth-child(2)::after {

    background:
        var(--prek-soft-green);

}


.question-card:nth-child(3) {

    border-left-color:
        var(--prek-gold);

}


.question-card:nth-child(3)::after {

    background:
        var(--prek-soft-gold);

}


.question-card:nth-child(4) {

    border-left-color:
        var(--prek-coral);

}


.question-card:nth-child(4)::after {

    background:
        var(--prek-soft-coral);

}


.question-card:nth-child(5) {

    border-left-color:
        var(--prek-purple);

}


.question-card:nth-child(5)::after {

    background:
        var(--prek-soft-purple);

}


.question-card:nth-child(6) {

    border-left-color:
        var(--prek-teal);

}


.question-card:nth-child(6)::after {

    background:
        var(--prek-soft-teal);

}


/* =========================================================
   66. QUESTION CARD TEXT LAYER
========================================================= */

.question-card {

    isolation:
        isolate;

}


.question-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0),
            rgba(255,255,255,0.55)
        );

    pointer-events:
        none;

}


/* =========================================================
   67. QUESTION CARD FOCUS
========================================================= */

.question-card:focus-within {

    border-color:
        var(--prek-teal);

    box-shadow:
        0 0 0 3px rgba(93, 169, 161, 0.14),
        var(--prek-shadow-card);

}


/* =========================================================
   68. QUESTION SECTION SPACING
========================================================= */

.question-grid {

    margin-top:
        8px;

}


/* =========================================================
   69. MATERIALS + QUESTIONS RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .materials-grid {

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

    }


    .question-grid {

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

    }

}


@media (max-width: 700px) {

    .materials-section {

        padding:
            68px 0;

    }


    .materials-grid {

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

        gap:
            14px;

    }


    .material-card {

        min-height:
            96px;

        padding:
            20px 18px;

    }


    .question-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .question-card {

        min-height:
            125px;

        padding:
            24px 20px;

        font-size:
            1rem;

    }

}

/* =========================================================
   70. RECOMMENDED BOOKS SECTION
========================================================= */

.books-section {

    position:
        relative;

    overflow:
        hidden;

    padding:
        88px 0;

    background:
        var(--prek-soft-blue);

}


/* =========================================================
   71. BOOKS SECTION DECORATION
========================================================= */

.books-section::before {

    content:
        "";

    position:
        absolute;

    width:
        320px;

    height:
        320px;

    top:
        -170px;

    left:
        -120px;

    border-radius:
        50%;

    background:
        rgba(127, 175, 120, 0.10);

    pointer-events:
        none;

}


.books-section::after {

    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    right:
        -100px;

    bottom:
        -150px;

    border-radius:
        50%;

    background:
        rgba(229, 184, 92, 0.10);

    pointer-events:
        none;

}


/* =========================================================
   72. BOOKS CONTENT LAYER
========================================================= */

.books-section .container {

    position:
        relative;

    z-index:
        1;

}


/* =========================================================
   73. BOOKS TITLE
========================================================= */

.books-section .section-title h2 {

    color:
        var(--prek-navy);

}


.books-section .section-title p {

    color:
        var(--prek-text-light);

}


/* =========================================================
   74. BOOK GRID
========================================================= */

.books-grid {

    display:
        grid;

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

    gap:
        20px;

}


/* =========================================================
   75. BOOK CARD
========================================================= */

.book-card {

    position:
        relative;

    min-height:
        285px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    padding:
        30px 25px;

    overflow:
        hidden;

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

    border-top:
        5px solid var(--prek-blue);

    border-radius:
        18px;

    background:
        var(--prek-white);

    box-shadow:
        var(--prek-shadow-soft);

    transition:
        transform var(--prek-transition),
        box-shadow var(--prek-transition),
        border-color var(--prek-transition);

}


/* =========================================================
   76. BOOK CARD HOVER
========================================================= */

.book-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--prek-shadow-hover);

}


/* =========================================================
   77. BOOK CARD ICON
========================================================= */

.book-card {

    font-size:
        2rem;

}


.book-card h3 {

    margin:
        17px 0 10px;

    font-size:
        1.28rem;

    color:
        var(--prek-navy);

}


.book-card p {

    margin-bottom:
        22px;

    color:
        var(--prek-text-light);

    font-size:
        0.96rem;

    line-height:
        1.65;

}


/* =========================================================
   78. BOOK CARD DECORATIVE CIRCLE
========================================================= */

.book-card::after {

    content:
        "";

    position:
        absolute;

    width:
        105px;

    height:
        105px;

    right:
        -45px;

    bottom:
        -45px;

    border-radius:
        50%;

    background:
        var(--prek-soft-blue);

    pointer-events:
        none;

    transition:
        transform var(--prek-transition);

}


.book-card:hover::after {

    transform:
        scale(1.15);

}


/* =========================================================
   79. BOOK CARD COLORS
========================================================= */

.book-card:nth-child(1) {

    border-top-color:
        var(--prek-green);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-green),
            var(--prek-white) 42%
        );

}


.book-card:nth-child(1)::after {

    background:
        var(--prek-soft-green);

}


.book-card:nth-child(2) {

    border-top-color:
        var(--prek-blue);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-blue),
            var(--prek-white) 42%
        );

}


.book-card:nth-child(2)::after {

    background:
        var(--prek-soft-blue);

}


.book-card:nth-child(3) {

    border-top-color:
        var(--prek-gold);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-gold),
            var(--prek-white) 42%
        );

}


.book-card:nth-child(3)::after {

    background:
        var(--prek-soft-gold);

}


.book-card:nth-child(4) {

    border-top-color:
        var(--prek-coral);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-coral),
            var(--prek-white) 42%
        );

}


.book-card:nth-child(4)::after {

    background:
        var(--prek-soft-coral);

}


/* =========================================================
   80. BOOK CARD HOVER COLORS
========================================================= */

.book-card:nth-child(1):hover {

    border-color:
        rgba(79, 127, 75, 0.35);

}


.book-card:nth-child(2):hover {

    border-color:
        rgba(49, 94, 130, 0.35);

}


.book-card:nth-child(3):hover {

    border-color:
        rgba(154, 114, 30, 0.35);

}


.book-card:nth-child(4):hover {

    border-color:
        rgba(157, 81, 67, 0.35);

}


/* =========================================================
   81. SONGS & MOVEMENT SECTION
========================================================= */

#songs {

    position:
        relative;

    overflow:
        hidden;

    padding:
        88px 0;

    background:
        var(--prek-warm-white);

}


/* =========================================================
   82. SONGS DECORATION
========================================================= */

#songs::before {

    content:
        "♪";

    position:
        absolute;

    top:
        40px;

    right:
        7%;

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        8rem;

    font-weight:
        800;

    line-height:
        1;

    color:
        rgba(93, 169, 161, 0.08);

    pointer-events:
        none;

}


#songs::after {

    content:
        "♫";

    position:
        absolute;

    bottom:
        20px;

    left:
        6%;

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        7rem;

    font-weight:
        800;

    line-height:
        1;

    color:
        rgba(229, 184, 92, 0.08);

    pointer-events:
        none;

}


/* =========================================================
   83. SONGS CONTENT LAYER
========================================================= */

#songs .container {

    position:
        relative;

    z-index:
        1;

}


/* =========================================================
   84. SONGS GRID
========================================================= */

.songs-grid {

    display:
        grid;

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

    gap:
        20px;

}


/* =========================================================
   85. SONG CARD
========================================================= */

.song-card {

    position:
        relative;

    min-height:
        265px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    padding:
        32px 24px;

    overflow:
        hidden;

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

    border-top:
        5px solid var(--prek-teal);

    border-radius:
        18px;

    background:
        var(--prek-white);

    text-align:
        center;

    box-shadow:
        var(--prek-shadow-soft);

    transition:
        transform var(--prek-transition),
        box-shadow var(--prek-transition),
        border-color var(--prek-transition);

}


/* =========================================================
   86. SONG CARD HOVER
========================================================= */

.song-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--prek-shadow-hover);

}


/* =========================================================
   87. SONG CARD ICON
========================================================= */

.song-card {

    font-size:
        2.2rem;

}


.song-card h3 {

    margin:
        16px 0 10px;

    color:
        var(--prek-navy);

    font-size:
        1.25rem;

}


.song-card p {

    color:
        var(--prek-text-light);

    font-size:
        0.95rem;

    line-height:
        1.65;

}


/* =========================================================
   88. SONG CARD DECORATIVE CIRCLE
========================================================= */

.song-card::after {

    content:
        "";

    position:
        absolute;

    width:
        115px;

    height:
        115px;

    left:
        -55px;

    bottom:
        -55px;

    border-radius:
        50%;

    background:
        var(--prek-soft-teal);

    pointer-events:
        none;

    transition:
        transform var(--prek-transition);

}


.song-card:hover::after {

    transform:
        scale(1.18);

}


/* =========================================================
   89. SONG CARD COLORS
========================================================= */

.song-card:nth-child(1) {

    border-top-color:
        var(--prek-blue);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-blue),
            var(--prek-white) 45%
        );

}


.song-card:nth-child(1)::after {

    background:
        var(--prek-soft-blue);

}


.song-card:nth-child(2) {

    border-top-color:
        var(--prek-purple);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-purple),
            var(--prek-white) 45%
        );

}


.song-card:nth-child(2)::after {

    background:
        var(--prek-soft-purple);

}


.song-card:nth-child(3) {

    border-top-color:
        var(--prek-gold);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-gold),
            var(--prek-white) 45%
        );

}


.song-card:nth-child(3)::after {

    background:
        var(--prek-soft-gold);

}


.song-card:nth-child(4) {

    border-top-color:
        var(--prek-coral);

    background:
        linear-gradient(
            180deg,
            var(--prek-soft-coral),
            var(--prek-white) 45%
        );

}


.song-card:nth-child(4)::after {

    background:
        var(--prek-soft-coral);

}


/* =========================================================
   90. SONG CARD HOVER COLORS
========================================================= */

.song-card:nth-child(1):hover {

    border-color:
        rgba(49, 94, 130, 0.35);

}


.song-card:nth-child(2):hover {

    border-color:
        rgba(98, 85, 143, 0.35);

}


.song-card:nth-child(3):hover {

    border-color:
        rgba(154, 114, 30, 0.35);

}


.song-card:nth-child(4):hover {

    border-color:
        rgba(157, 81, 67, 0.35);

}


/* =========================================================
   91. BOOKS + SONGS RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .books-grid,
    .songs-grid {

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

    }

}


@media (max-width: 700px) {

    .books-section,
    #songs {

        padding:
            68px 0;

    }


    .books-grid,
    .songs-grid {

        grid-template-columns:
            1fr;

        gap:
            16px;

    }


    .book-card {

        min-height:
            250px;

        padding:
            26px 22px;

    }


    .song-card {

        min-height:
            240px;

        padding:
            28px 22px;

    }


    .books-section::before {

        width:
            220px;

        height:
            220px;

    }


    .books-section::after {

        width:
            190px;

        height:
            190px;

    }


    #songs::before {

        font-size:
            5rem;

    }


    #songs::after {

        font-size:
            4.5rem;

    }

}

/* =========================================================
   92. FAMILY CONNECTION SECTION
========================================================= */

#family {

    position:
        relative;

    overflow:
        hidden;

    padding:
        88px 0;

    background:
        var(--prek-soft-coral);

}


/* =========================================================
   93. FAMILY SECTION DECORATION
========================================================= */

#family::before {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    top:
        -150px;

    right:
        -80px;

    border-radius:
        50%;

    background:
        rgba(229, 184, 92, 0.12);

    pointer-events:
        none;

}


#family::after {

    content:
        "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    bottom:
        -130px;

    left:
        -90px;

    border-radius:
        50%;

    background:
        rgba(93, 169, 161, 0.10);

    pointer-events:
        none;

}


/* =========================================================
   94. FAMILY CONTENT LAYER
========================================================= */

#family .container {

    position:
        relative;

    z-index:
        1;

}


/* =========================================================
   95. FAMILY CARD
========================================================= */

.family-card {

    position:
        relative;

    max-width:
        960px;

    margin:
        0 auto;

    padding:
        52px 56px;

    overflow:
        hidden;

    border:
        1px solid rgba(157, 81, 67, 0.12);

    border-top:
        6px solid var(--prek-coral);

    border-radius:
        24px;

    background:
        var(--prek-white);

    box-shadow:
        var(--prek-shadow-card);

}


/* =========================================================
   96. FAMILY CARD DECORATIVE CIRCLE
========================================================= */

.family-card::before {

    content:
        "";

    position:
        absolute;

    width:
        190px;

    height:
        190px;

    top:
        -105px;

    right:
        -55px;

    border-radius:
        50%;

    background:
        var(--prek-soft-gold);

    pointer-events:
        none;

}


.family-card::after {

    content:
        "";

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    bottom:
        -85px;

    left:
        -50px;

    border-radius:
        50%;

    background:
        var(--prek-soft-teal);

    pointer-events:
        none;

}


/* =========================================================
   97. FAMILY CARD CONTENT
========================================================= */

.family-card h3,
.family-card p,
.family-card .btn {

    position:
        relative;

    z-index:
        1;

}


.family-card h3 {

    margin-bottom:
        15px;

    font-size:
        clamp(
            1.65rem,
            3vw,
            2.25rem
        );

    color:
        var(--prek-navy);

}


.family-card p {

    max-width:
        850px;

    margin-bottom:
        28px;

    color:
        var(--prek-text);

    font-size:
        1.02rem;

    line-height:
        1.8;

}


/* =========================================================
   98. FAMILY BUTTON
========================================================= */

.family-card .btn-primary {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        13px 24px;

    border:
        1px solid transparent;

    border-radius:
        10px;

    background:
        var(--prek-coral);

    color:
        var(--prek-white);

    font-family:
        "Nunito",
        sans-serif;

    font-weight:
        800;

    box-shadow:
        0 7px 18px
        rgba(157, 81, 67, 0.18);

    transition:
        transform var(--prek-transition),
        background var(--prek-transition),
        box-shadow var(--prek-transition);

}


.family-card .btn-primary:hover {

    transform:
        translateY(-2px);

    background:
        var(--prek-deep-coral);

    color:
        var(--prek-white);

    box-shadow:
        0 11px 24px
        rgba(157, 81, 67, 0.24);

}


/* =========================================================
   99. NEWSLETTER SECTION
========================================================= */

.newsletter {

    position:
        relative;

    overflow:
        hidden;

    padding:
        92px 0;

    background:
        linear-gradient(
            135deg,
            var(--prek-soft-blue) 0%,
            var(--prek-soft-green) 48%,
            var(--prek-soft-gold) 100%
        );

}


/* =========================================================
   100. NEWSLETTER DECORATION
========================================================= */

.newsletter::before {

    content:
        "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    top:
        -190px;

    right:
        -120px;

    border-radius:
        50%;

    background:
        rgba(93, 169, 161, 0.10);

    pointer-events:
        none;

}


.newsletter::after {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    bottom:
        -160px;

    left:
        -100px;

    border-radius:
        50%;

    background:
        rgba(217, 130, 112, 0.08);

    pointer-events:
        none;

}


/* =========================================================
   101. NEWSLETTER CONTAINER
========================================================= */

.newsletter .container {

    position:
        relative;

    z-index:
        1;

}


/* =========================================================
   102. NEWSLETTER BOX
========================================================= */

.newsletter-box {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, 0.65fr);

    gap:
        42px;

    align-items:
        center;

    max-width:
        1100px;

    margin:
        0 auto;

    padding:
        48px;

    border:
        1px solid rgba(41, 72, 88, 0.08);

    border-radius:
        24px;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        var(--prek-shadow-card);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

}


/* =========================================================
   103. NEWSLETTER CONTENT
========================================================= */

.newsletter-content {

    min-width:
        0;

}


.newsletter-content h2 {

    margin:
        15px 0;

    font-size:
        clamp(
            1.9rem,
            3vw,
            2.65rem
        );

    color:
        var(--prek-navy);

}


.newsletter-content p {

    max-width:
        680px;

    color:
        var(--prek-text);

    font-size:
        1rem;

    line-height:
        1.75;

}


/* =========================================================
   104. NEWSLETTER TAG
========================================================= */

.newsletter-tag {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        34px;

    padding:
        7px 13px;

    border:
        1px solid rgba(157, 81, 67, 0.10);

    border-radius:
        999px;

    background:
        var(--prek-soft-coral);

    color:
        var(--prek-deep-coral);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        0.78rem;

    font-weight:
        800;

    letter-spacing:
        0.04em;

}


/* =========================================================
   105. NEWSLETTER BENEFITS
========================================================= */

.newsletter-benefits {

    display:
        grid;

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

    gap:
        10px 22px;

    margin-top:
        24px;

}


.newsletter-benefits li {

    color:
        var(--prek-text);

    font-size:
        0.94rem;

    font-weight:
        600;

    line-height:
        1.5;

}


/* =========================================================
   106. NEWSLETTER FORM
========================================================= */

.newsletter-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    padding:
        26px;

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

    border-radius:
        18px;

    background:
        var(--prek-white);

    box-shadow:
        var(--prek-shadow-soft);

}


/* =========================================================
   107. NEWSLETTER INPUT
========================================================= */

.newsletter-form input[type="email"] {

    width:
        100%;

    min-height:
        52px;

    padding:
        13px 15px;

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

    border-radius:
        10px;

    outline:
        none;

    background:
        var(--prek-cream);

    color:
        var(--prek-navy);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.96rem;

    transition:
        border-color var(--prek-transition),
        box-shadow var(--prek-transition),
        background var(--prek-transition);

}


.newsletter-form input[type="email"]::placeholder {

    color:
        var(--prek-text-light);

}


.newsletter-form input[type="email"]:focus {

    border-color:
        var(--prek-teal);

    background:
        var(--prek-white);

    box-shadow:
        0 0 0 4px
        rgba(93, 169, 161, 0.15);

}


/* =========================================================
   108. NEWSLETTER SUBMIT BUTTON
========================================================= */

.newsletter-form button {

    width:
        100%;

    min-height:
        52px;

    padding:
        13px 18px;

    border:
        1px solid transparent;

    border-radius:
        10px;

    background:
        var(--prek-teal);

    color:
        var(--prek-navy);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        0.98rem;

    font-weight:
        800;

    box-shadow:
        0 7px 17px
        rgba(54, 122, 116, 0.14);

    transition:
        transform var(--prek-transition),
        background var(--prek-transition),
        color var(--prek-transition),
        box-shadow var(--prek-transition);

}


.newsletter-form button:hover {

    transform:
        translateY(-2px);

    background:
        var(--prek-deep-teal);

    color:
        var(--prek-white);

    box-shadow:
        0 11px 22px
        rgba(54, 122, 116, 0.20);

}


/* =========================================================
   109. NEWSLETTER FORM VALIDATION
========================================================= */

.newsletter-form input[type="email"]:invalid:not(:placeholder-shown) {

    border-color:
        var(--prek-coral);

    box-shadow:
        0 0 0 3px
        rgba(217, 130, 112, 0.10);

}


.newsletter-form input[type="email"]:valid:not(:placeholder-shown) {

    border-color:
        var(--prek-green);

}


/* =========================================================
   110. HIDDEN NEWSLETTER IFRAME
========================================================= */

.newsletter-form + iframe {

    display:
        none;

}


/* =========================================================
   111. FAMILY + NEWSLETTER RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .newsletter-box {

        grid-template-columns:
            1fr;

        gap:
            30px;

        padding:
            38px;

    }


    .newsletter-form {

        max-width:
            620px;

        width:
            100%;

    }


    .family-card {

        padding:
            44px 42px;

    }

}


@media (max-width: 700px) {

    #family {

        padding:
            68px 0;

    }


    .family-card {

        padding:
            34px 24px;

        border-radius:
            18px;

    }


    .family-card h3 {

        font-size:
            1.7rem;

    }


    .family-card p {

        font-size:
            0.95rem;

        line-height:
            1.7;

    }


    .family-card .btn-primary {

        width:
            100%;

    }


    .newsletter {

        padding:
            68px 0;

    }


    .newsletter-box {

        padding:
            28px 22px;

        border-radius:
            18px;

    }


    .newsletter-content h2 {

        font-size:
            1.85rem;

    }


    .newsletter-content p {

        font-size:
            0.94rem;

    }


    .newsletter-benefits {

        grid-template-columns:
            1fr;

        gap:
            8px;

    }


    .newsletter-form {

        padding:
            20px;

    }


    .newsletter-tag {

        font-size:
            0.72rem;

    }

}


/* =========================================================
   112. VERY SMALL MOBILE DEVICES
========================================================= */

@media (max-width: 430px) {

    .family-card {

        padding:
            30px 20px;

    }


    .family-card .btn-primary {

        min-height:
            48px;

        padding:
            12px 16px;

        font-size:
            0.92rem;

    }


    .newsletter-box {

        padding:
            24px 18px;

    }


    .newsletter-form {

        padding:
            17px;

    }


    .newsletter-form input[type="email"],
    .newsletter-form button {

        min-height:
            50px;

    }

}

/* =========================================================
   113. HEADER
========================================================= */

header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    width:
        100%;

    background:
        rgba(254, 253, 252, 0.97);

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

    box-shadow:
        0 4px 18px
        rgba(41, 72, 88, 0.07);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


/* =========================================================
   114. NAVIGATION CONTAINER
========================================================= */

.nav-container {

    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

}


/* =========================================================
   115. LOGO
========================================================= */

.logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    flex-shrink:
        0;

}


.logo img {

    width:
        54px;

    height:
        54px;

    object-fit:
        contain;

}


.logo > div {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.logo h1 {

    margin:
        0;

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1.28rem;

    font-weight:
        800;

    line-height:
        1;

    color:
        var(--prek-navy);

}


.logo span {

    margin-top:
        4px;

    color:
        var(--prek-deep-green);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

}


/* =========================================================
   116. LOGO HOVER
========================================================= */

.logo {

    transition:
        transform var(--prek-transition);

}


.logo:hover {

    transform:
        translateY(-1px);

}


.logo:focus-visible {

    border-radius:
        8px;

}


/* =========================================================
   117. SEARCH BAR
========================================================= */

.search-bar {

    display:
        flex;

    align-items:
        center;

    flex:
        1 1 260px;

    max-width:
        350px;

    min-width:
        180px;

}


.search-bar input {

    width:
        100%;

    min-height:
        42px;

    padding:
        10px 13px;

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

    border-right:
        0;

    border-radius:
        9px 0 0 9px;

    outline:
        none;

    background:
        var(--prek-white);

    color:
        var(--prek-text);

    font-size:
        0.88rem;

    transition:
        border-color var(--prek-transition),
        box-shadow var(--prek-transition);

}


.search-bar input::placeholder {

    color:
        var(--prek-text-light);

}


.search-bar input:focus {

    border-color:
        var(--prek-teal);

    box-shadow:
        0 0 0 3px
        rgba(93, 169, 161, 0.12);

}


.search-bar button {

    width:
        48px;

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

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

    border-radius:
        0 9px 9px 0;

    background:
        var(--prek-teal);

    color:
        var(--prek-navy);

    font-size:
        1rem;

    transition:
        background var(--prek-transition),
        color var(--prek-transition),
        transform var(--prek-transition);

}


.search-bar button:hover {

    background:
        var(--prek-deep-teal);

    color:
        var(--prek-white);

}


.search-bar button:active {

    transform:
        scale(0.96);

}


/* =========================================================
   118. PRIMARY NAVIGATION
========================================================= */

nav {

    margin-left:
        auto;

}


nav ul {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

}


nav li {

    display:
        block;

}


nav a {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        8px 10px;

    border-radius:
        8px;

    color:
        var(--prek-soft-navy);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        0.82rem;

    font-weight:
        800;

    white-space:
        nowrap;

    transition:
        background var(--prek-transition),
        color var(--prek-transition),
        transform var(--prek-transition);

}


nav a:hover {

    background:
        var(--prek-soft-teal);

    color:
        var(--prek-deep-teal);

    transform:
        translateY(-1px);

}


nav a.active {

    background:
        var(--prek-soft-gold);

    color:
        var(--prek-deep-gold);

    box-shadow:
        0 3px 9px
        rgba(154, 114, 30, 0.10);

}


/* =========================================================
   119. MOBILE MENU BUTTON
========================================================= */

.mobile-menu {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    padding:
        0;

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

    border-radius:
        10px;

    background:
        var(--prek-soft-teal);

    color:
        var(--prek-navy);

    font-size:
        1.25rem;

    line-height:
        1;

    transition:
        background var(--prek-transition),
        color var(--prek-transition),
        transform var(--prek-transition);

}


.mobile-menu:hover {

    background:
        var(--prek-teal);

    color:
        var(--prek-white);

}


.mobile-menu:active {

    transform:
        scale(0.95);

}


/* =========================================================
   120. FOOTER
========================================================= */

footer {

    position:
        relative;

    overflow:
        hidden;

    background:
        var(--prek-navy);

    color:
        rgba(255, 255, 255, 0.78);

}


/* =========================================================
   121. FOOTER DECORATION
========================================================= */

footer::before {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    top:
        -180px;

    right:
        -80px;

    border-radius:
        50%;

    background:
        rgba(93, 169, 161, 0.08);

    pointer-events:
        none;

}


footer::after {

    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    bottom:
        -140px;

    left:
        -80px;

    border-radius:
        50%;

    background:
        rgba(229, 184, 92, 0.07);

    pointer-events:
        none;

}


/* =========================================================
   122. FOOTER GRID
========================================================= */

.footer-grid {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

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

    gap:
        46px;

    padding:
        68px 0 52px;

}


/* =========================================================
   123. FOOTER BRAND COLUMN
========================================================= */

.footer-grid > div:first-child {

    max-width:
        390px;

}


.footer-grid > div:first-child h3 {

    margin-bottom:
        15px;

    color:
        var(--prek-white);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1.35rem;

    font-weight:
        800;

}


.footer-grid > div:first-child h3::after {

    content:
        "";

    display:
        block;

    width:
        46px;

    height:
        3px;

    margin-top:
        10px;

    border-radius:
        999px;

    background:
        var(--prek-teal);

}


.footer-grid > div:first-child p {

    color:
        rgba(255, 255, 255, 0.70);

    font-size:
        0.92rem;

    line-height:
        1.75;

}


/* =========================================================
   124. FOOTER HEADINGS
========================================================= */

.footer-grid h4 {

    margin-bottom:
        16px;

    color:
        var(--prek-white);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1rem;

    font-weight:
        800;

}


/* =========================================================
   125. FOOTER LISTS
========================================================= */

.footer-grid ul {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


.footer-grid li {

    display:
        block;

}


.footer-grid a {

    display:
        inline-block;

    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        0.88rem;

    line-height:
        1.5;

    transition:
        color var(--prek-transition),
        transform var(--prek-transition);

}


.footer-grid a:hover {

    color:
        var(--prek-teal);

    transform:
        translateX(3px);

}


/* =========================================================
   126. AGE GROUP FOOTER COLORS
========================================================= */

.footer-grid > div:nth-child(2)
li:nth-child(1) a:hover {

    color:
        var(--prek-blue);

}


.footer-grid > div:nth-child(2)
li:nth-child(2) a:hover {

    color:
        var(--prek-green);

}


.footer-grid > div:nth-child(2)
li:nth-child(3) a:hover {

    color:
        var(--prek-coral);

}


.footer-grid > div:nth-child(2)
li:nth-child(4) a:hover {

    color:
        var(--prek-gold);

}


/* =========================================================
   127. FOOTER BOTTOM
========================================================= */

.footer-bottom {

    position:
        relative;

    z-index:
        1;

    padding:
        18px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.10);

    text-align:
        center;

}


.footer-bottom p {

    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        0.78rem;

    line-height:
        1.5;

}


/* =========================================================
   128. DESKTOP HEADER COMPRESSION
========================================================= */

@media (max-width: 1200px) {

    .nav-container {

        gap:
            15px;

    }


    .search-bar {

        max-width:
            280px;

    }


    nav ul {

        gap:
            2px;

    }


    nav a {

        padding:
            8px 8px;

        font-size:
            0.77rem;

    }

}


/* =========================================================
   129. TABLET NAVIGATION
========================================================= */

@media (max-width: 1050px) {

    .nav-container {

        flex-wrap:
            wrap;

        padding:
            12px 0;

    }


    .logo {

        order:
            1;

    }


    .search-bar {

        order:
            2;

        margin-left:
            auto;

        max-width:
            300px;

    }


    .mobile-menu {

        display:
            flex;

        order:
            3;

    }


    nav {

        order:
            4;

        width:
            100%;

        display:
            none;

        margin-left:
            0;

    }


    nav.mobile-nav-open {

        display:
            block;

        padding:
            12px;

        border-top:
            1px solid var(--prek-border-light);

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

        border-radius:
            12px;

        background:
            var(--prek-white);

        box-shadow:
            0 12px 28px
            rgba(41, 72, 88, 0.10);

    }


    nav.mobile-nav-open ul {

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            5px;

    }


    nav.mobile-nav-open a {

        width:
            100%;

        justify-content:
            flex-start;

        padding:
            11px 14px;

    }


    .footer-grid {

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

        gap:
            36px;

    }


    .footer-grid > div:first-child {

        max-width:
            none;

    }

}


/* =========================================================
   130. MOBILE HEADER
========================================================= */

@media (max-width: 760px) {

    .container {

        width:
            min(
                100% - 28px,
                1180px
            );

    }


    header {

        position:
            sticky;

    }


    .nav-container {

        min-height:
            70px;

        padding:
            10px 0;

    }


    .logo img {

        width:
            46px;

        height:
            46px;

    }


    .logo h1 {

        font-size:
            1.05rem;

    }


    .logo span {

        font-size:
            0.68rem;

    }


    .search-bar {

        flex:
            1;

        min-width:
            0;

        max-width:
            none;

        margin-left:
            0;

    }


    .search-bar input {

        min-height:
            40px;

        font-size:
            0.78rem;

    }


    .search-bar button {

        width:
            43px;

        min-height:
            40px;

    }


    .mobile-menu {

        width:
            42px;

        height:
            42px;

    }


    section {

        padding:
            68px 0;

    }


    .section-title {

        margin-bottom:
            34px;

    }


    .section-title p {

        font-size:
            0.96rem;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            28px;

        padding:
            52px 0 38px;

    }


    .footer-grid > div:first-child {

        max-width:
            none;

    }

}


/* =========================================================
   131. SMALL MOBILE HEADER
========================================================= */

@media (max-width: 560px) {

    .nav-container {

        display:
            grid;

        grid-template-columns:
            1fr auto;

        gap:
            10px;

    }


    .logo {

        min-width:
            0;

    }


    .search-bar {

        grid-column:
            1 / -1;

        grid-row:
            2;

        width:
            100%;

    }


    .mobile-menu {

        grid-column:
            2;

        grid-row:
            1;

    }


    .logo h1 {

        font-size:
            1rem;

    }


    .logo span {

        font-size:
            0.64rem;

    }


    .search-bar input {

        font-size:
            0.8rem;

    }


    .footer-grid {

        gap:
            25px;

    }

}


/* =========================================================
   132. ACCESSIBILITY MOTION PREFERENCE
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }

}


/* =========================================================
   133. PRINT STYLES
========================================================= */

@media print {

    header,
    .search-bar,
    .mobile-menu,
    nav,
    .newsletter,
    footer {

        display:
            none !important;

    }


    section {

        padding:
            30px 0;

        break-inside:
            avoid;

    }


    .container {

        width:
            100%;

        max-width:
            none;

    }


    .study-card,
    .material-card,
    .question-card,
    .book-card,
    .song-card,
    .dashboard-card,
    .family-card {

        box-shadow:
            none;

        break-inside:
            avoid;

    }


    body {

        background:
            #FFFFFF;

        color:
            #000000;

    }

}