/*==================================================
  LITTLE EXPLORERS LEARNING HUB
  PRINTABLES PAGE STYLESHEET
  Part 1
  Variables • Reset • Layout • Typography • Buttons
==================================================*/

/*==============================
ROOT VARIABLES
==============================*/

:root{

--primary:#2d6a4f;
--primary-dark:#1f513c;
--primary-light:#d8f3dc;

--secondary:#40916c;
--accent:#95d5b2;

--gold:#e9c46a;
--orange:#f4a261;
--red:#e76f51;

--blue:#4f8ef7;
--aqua:#4cc9f0;
--green:#43aa8b;
--purple:#9d4edd;
--yellow:#f9c74f;
--coral:#ff7f50;

--text:#2b2b2b;
--text-light:#666;
--heading:#16322f;

--white:#ffffff;
--off-white:#f8faf9;
--light:#eef6f2;
--border:#d9e6df;

--shadow-sm:0 4px 12px rgba(0,0,0,.06);
--shadow:0 10px 30px rgba(0,0,0,.08);
--shadow-lg:0 20px 45px rgba(0,0,0,.12);

--radius-sm:10px;
--radius:18px;
--radius-lg:28px;

--transition:.30s ease;

--container:1240px;

}

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

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

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Inter",sans-serif;
font-size:16px;
line-height:1.7;

background:var(--off-white);

color:var(--text);

-webkit-font-smoothing:antialiased;

}

img{

display:block;
max-width:100%;
height:auto;

}

a{

text-decoration:none;
color:inherit;

transition:var(--transition);

}

ul{

list-style:none;

}

button,
input,
textarea,
select{

font:inherit;

}

/*==============================
LAYOUT
==============================*/

.container{

width:min(92%,var(--container));
margin:auto;

}

section{

padding:6rem 0;

}

/*==============================
HEADINGS
==============================*/

h1,
h2,
h3,
h4{

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

color:var(--heading);

font-weight:800;

line-height:1.15;

}

h1{

font-size:clamp(2.6rem,5vw,4.3rem);

}

h2{

font-size:clamp(2rem,4vw,3rem);

margin-bottom:1rem;

}

h3{

font-size:1.35rem;

margin-bottom:.75rem;

}

p{

color:var(--text-light);

}

.section-title{

max-width:760px;

margin:0 auto 4rem;

text-align:center;

}

.section-title p{

font-size:1.05rem;

}

.section-label{

display:inline-block;

margin-bottom:1rem;

padding:.45rem 1rem;

border-radius:100px;

background:var(--primary-light);

color:var(--primary-dark);

font-size:.82rem;

font-weight:700;

letter-spacing:.08em;

text-transform:uppercase;

}

/*==============================
BUTTONS
==============================*/

.btn{

display:inline-flex;

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

gap:.6rem;

padding:1rem 1.8rem;

border-radius:100px;

font-weight:700;

transition:var(--transition);

cursor:pointer;

border:none;

}

.btn-primary{

background:var(--primary);

color:var(--white);

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

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-3px);

box-shadow:var(--shadow);

}

.btn-outline{

background:transparent;

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

color:var(--primary);

}

.btn-outline:hover{

background:var(--primary);

color:white;

}

.btn-secondary{

background:white;

color:var(--primary);

border:2px solid transparent;

}

.btn-secondary:hover{

background:var(--light);

}

/*==============================
CARDS
==============================*/

.study-card,
.favorite-card,
.activity-card,
.season-card,
.interest-card,
.why-card,
.custom-card,
.planning-card,
.month-card,
.trust-card,
.preview-card,
.quick-column{

background:white;

border-radius:var(--radius);

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

transition:var(--transition);

overflow:hidden;

}

.study-card:hover,
.favorite-card:hover,
.activity-card:hover,
.season-card:hover,
.interest-card:hover,
.why-card:hover,
.custom-card:hover,
.planning-card:hover,
.month-card:hover,
.trust-card:hover,
.preview-card:hover,
.quick-column:hover{

transform:translateY(-8px);

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

}

/*==============================
COMMON GRIDS
==============================*/

.study-grid,
.favorite-grid,
.activity-grid,
.season-grid,
.interest-grid,
.why-grid,
.custom-grid,
.planning-grid,
.featured-month-grid,
.trust-grid,
.quick-links-grid,
.footer-grid{

display:grid;

gap:2rem;

}

.study-grid{

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

}

.favorite-grid,
.activity-grid,
.season-grid,
.interest-grid,
.why-grid,
.custom-grid,
.planning-grid,
.featured-month-grid,
.trust-grid{

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

}

.quick-links-grid{

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

}

/*==============================
BADGES
==============================*/

.study-tag,
.activity-badge,
.month-tag{

display:inline-flex;

align-items:center;

padding:.45rem .9rem;

border-radius:100px;

font-size:.75rem;

font-weight:700;

letter-spacing:.05em;

text-transform:uppercase;

}

.study-tag.blue{background:#e9f2ff;color:#2563eb;}
.study-tag.green{background:#e8f8ef;color:#1b7f4a;}
.study-tag.orange{background:#fff3df;color:#b76b00;}
.study-tag.purple{background:#f4ebff;color:#6a31d8;}
.study-tag.coral{background:#ffe7df;color:#d65c2f;}
.study-tag.aqua{background:#e6fbff;color:#0088aa;}

.activity-badge{

background:var(--primary);

color:white;

}

.month-tag{

background:var(--gold);

color:#5b4100;

}

/*==============================
LINKS
==============================*/

.card-link{

display:inline-flex;

align-items:center;

gap:.35rem;

margin-top:1rem;

font-weight:700;

color:var(--primary);

}

.card-link:hover{

gap:.6rem;

}

/*==============================
UTILITY
==============================*/

.text-center{

text-align:center;

}

.mt-2{

margin-top:2rem;

}

.mt-3{

margin-top:3rem;

}

.mb-2{

margin-bottom:2rem;

}

.mb-3{

margin-bottom:3rem;

}

.hidden{

display:none;

}

/*==================================================
PART 2
HEADER • NAVIGATION • HERO • HERO SEARCH
==================================================*/

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

.site-header{

    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(12px);

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

    box-shadow:0 2px 12px rgba(0,0,0,.04);

}

.nav-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:90px;
    gap:16px;
}

/*==============================
LOGO
==============================*/

.logo{

    display:flex;
    align-items:center;
    gap:1rem;

}

.logo img{

    width:64px;
    height:64px;
    object-fit:contain;

}

.logo-text{

    display:flex;
    flex-direction:column;
    line-height:1.1;

}

.logo-text h1{

    margin:0;
    font-size:1.5rem;
    color:var(--primary);

}

.logo-text span{

    font-size:.95rem;
    font-weight:700;
    color:var(--text-light);

}

/*==============================
MAIN NAVIGATION
==============================*/

.main-nav{
    margin-left:auto;
    flex:1;
    display:flex;
    justify-content:center;
    min-width:0;
}

.main-nav ul{
    display:flex;
    align-items:center;
    gap:18px;
    margin:0;
    padding:0;
    list-style:none;
    flex-wrap:nowrap;
}

.main-nav a{
    position:relative;
    display:inline-flex;
    align-items:center;
    padding:6px 0;
    font-weight:600;
    color:var(--text);
    text-decoration:none;
    transition:var(--transition);
    white-space:nowrap;
}

.main-nav a:hover{
    color:var(--primary);
}

.main-nav a.active{
    color:var(--primary);
}

.main-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:3px;
    border-radius:999px;
    background:var(--primary);
    transition:width .3s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after{
    width:100%;
}
/*==============================
HEADER ACTIONS
==============================*/

.header-actions{
    display:flex;
    align-items:center;
    flex-shrink:0;
    gap:10px;
    margin-left:20px;
}

.search-toggle{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:transparent;
    color:var(--primary);
    transition:var(--transition);
}

.search-toggle:hover{
    background:var(--primary);
    color:#fff;
    transform:translateY(-2px);
}

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

.mobile-menu{
    display:none;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:12px;
    background:var(--primary);
    color:#fff;
    font-size:1.4rem;
    transition:var(--transition);
}

.mobile-menu:hover{
    background:var(--primary-dark);
}

/*==============================
RESPONSIVE NAVIGATION
==============================*/

@media (max-width:1100px){

    .nav-container{
        min-height:82px;
    }

    .main-nav{
        display:none;
    }

    .main-nav.show{
        display:block;
        position:absolute;
        top:82px;
        left:0;
        right:0;
        background:#fff;
        padding:1.5rem;
        border-top:1px solid var(--border);
        box-shadow:var(--shadow);
    }

    .main-nav ul{
        flex-direction:column;
        align-items:flex-start;
        gap:1.25rem;
    }

    .mobile-menu{
        display:flex;
    }

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

.study-hero{

background:

linear-gradient(
135deg,
#eef8f2 0%,
#ffffff 55%,
#e5f5ee 100%
);

padding:6rem 0;

overflow:hidden;

}

.hero-layout{

display:grid;

grid-template-columns:
1.2fr
.8fr;

align-items:center;

gap:5rem;

}

/*==============================
BREADCRUMB
==============================*/

.breadcrumb{

display:flex;

align-items:center;

gap:.6rem;

margin-bottom:1.5rem;

font-size:.92rem;

color:var(--text-light);

}

.breadcrumb a{

color:var(--primary);

font-weight:600;

}

.breadcrumb a:hover{

text-decoration:underline;

}

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

.hero-badge{

display:inline-flex;

align-items:center;

gap:.5rem;

padding:.55rem 1rem;

margin-bottom:1.5rem;

border-radius:999px;

background:var(--primary-light);

color:var(--primary-dark);

font-weight:700;

}

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

.hero-content h1{

margin-bottom:1.5rem;

max-width:700px;

}

.hero-content p{

font-size:1.12rem;

max-width:650px;

margin-bottom:2rem;

}

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

.hero-search{

display:flex;

margin-bottom:2rem;

max-width:540px;

border-radius:999px;

overflow:hidden;

background:white;

box-shadow:var(--shadow);

}

.hero-search input{

flex:1;

padding:1rem 1.25rem;

border:none;

background:white;

}

.hero-search input:focus{

outline:none;

}

.hero-search button{

border:none;

padding:0 2rem;

background:var(--primary);

color:white;

font-weight:700;

cursor:pointer;

transition:var(--transition);

}

.hero-search button:hover{

background:var(--primary-dark);

}

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

.hero-buttons{

display:flex;

flex-wrap:wrap;

gap:1rem;

}

/*==============================
PREVIEW CARD
==============================*/

.preview-card{

background:white;

border-radius:24px;

overflow:hidden;

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

}

.preview-header{

padding:1rem 1.5rem;

background:var(--primary);

color:white;

font-weight:700;

}

.preview-card img{

width:100%;

height:260px;

object-fit:cover;

}

.preview-body{

padding:2rem;

}

.preview-body h3{

margin-bottom:1rem;

}

.preview-list{

margin:1.5rem 0;

display:grid;

gap:.75rem;

}

.preview-list li{

display:flex;

align-items:center;

gap:.5rem;

font-weight:600;

}

.preview-stats{

display:grid;

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

gap:1rem;

margin-top:2rem;

text-align:center;

}

.preview-stats strong{

display:block;

font-size:1.8rem;

color:var(--primary);

}

.preview-stats span{

font-size:.9rem;

color:var(--text-light);

}

/*==============================
RESPONSIVE
==============================*/

@media (max-width:1100px){

.hero-layout{

grid-template-columns:1fr;

}

.search-bar{

display:none;

}

.main-navigation{

display:none;

}

.mobile-menu{

display:block;

}

}

@media (max-width:768px){

.study-hero{

padding:4rem 0;

}

.hero-buttons{

flex-direction:column;

align-items:stretch;

}

.hero-search{

flex-direction:column;

border-radius:18px;

}

.hero-search button{

padding:1rem;

}

.preview-card img{

height:220px;

}

}

/*==================================================
PART 3
CONTENT SECTIONS
CARDS • GRIDS • FEATURED • PLANNING
==================================================*/

/*==============================
SECTION BACKGROUNDS
==============================*/

.interest-areas,
.teacher-favorites,
.new-activities,
.featured-month,
.quick-links{

background:#ffffff;

}

.featured-studies,
.season-section,
.planning-section,
.trust-section{

background:#f7fbf9;

}

.why-section,
.custom-section,
.newsletter-section,
.bottom-cta,
.faq-section{

background:#eef7f2;

}

/*==============================
COMMON CARDS
==============================*/

.study-card,
.favorite-card,
.activity-card,
.season-card,
.interest-card,
.planning-card,
.custom-card,
.month-card,
.trust-card,
.why-card{

display:flex;

flex-direction:column;

height:100%;

overflow:hidden;

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

}

.study-content,
.activity-card,
.favorite-card,
.season-card,
.interest-card,
.planning-card,
.custom-card,
.month-card,
.trust-card,
.why-card{

padding:2rem;

}

/*==============================
CARD IMAGES
==============================*/

.study-card img{

width:100%;

height:230px;

object-fit:cover;

}

.study-content{

display:flex;

flex-direction:column;

flex:1;

}

.study-content p{

margin:1rem 0;

flex:1;

}

.study-footer{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:1.5rem;

padding-top:1.5rem;

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

font-size:.95rem;

}

.study-footer a{

font-weight:700;

color:var(--primary);

}

/*==============================
INTEREST CARDS
==============================*/

.interest-card{

text-align:center;

align-items:center;

}

.interest-icon{

width:85px;
height:85px;

margin:0 auto 1.5rem;

display:grid;

place-items:center;

font-size:2rem;

border-radius:50%;

background:var(--light);

}

.interest-card h3{

margin-bottom:1rem;

}

.interest-card p{

margin-bottom:1.5rem;

}

/*==============================
COLOR VARIATIONS
==============================*/

.interest-card.blue .interest-icon{

background:#eaf2ff;

}

.interest-card.green .interest-icon{

background:#e8faf0;

}

.interest-card.aqua .interest-icon{

background:#e9fbff;

}

.interest-card.yellow .interest-icon{

background:#fff9e5;

}

.interest-card.purple .interest-icon{

background:#f4ecff;

}

.interest-card.coral .interest-icon{

background:#fff0ea;

}

.interest-card.orange .interest-icon{

background:#fff3e5;

}

/*==============================
FAVORITE CARDS
==============================*/

.favorite-card{

text-align:center;

}

.favorite-icon{

width:75px;
height:75px;

margin:0 auto 1.5rem;

display:grid;

place-items:center;

font-size:2rem;

border-radius:50%;

background:var(--primary-light);

}

.favorite-card p{

margin:1rem 0;

}

/*==============================
SEASON BUNDLES
==============================*/

.season-card{

text-align:center;

}

.season-icon{

width:85px;
height:85px;

margin:0 auto 1.5rem;

display:grid;

place-items:center;

font-size:2rem;

border-radius:50%;

background:linear-gradient(
135deg,
var(--primary-light),
#ffffff
);

}

.season-card p{

margin:1rem 0;

}

/*==============================
WHY SECTION
==============================*/

.why-card{

text-align:center;

}

.why-icon{

width:80px;
height:80px;

margin:0 auto 1.5rem;

display:grid;

place-items:center;

font-size:2rem;

border-radius:50%;

background:var(--primary);

color:white;

}

.why-card p{

margin-top:1rem;

}

/*==============================
FREE PRINTABLES
==============================*/

.activity-card{

position:relative;

}

.activity-badge{

position:absolute;

top:20px;
right:20px;

}

.activity-meta{

display:flex;

justify-content:space-between;

margin:1.5rem 0;

font-size:.9rem;

color:var(--text-light);

}

.section-action{

margin-top:3rem;

text-align:center;

}

/*==============================
PLANNING CENTER
==============================*/

.planning-card{

text-align:center;

}

.planning-icon{

width:80px;
height:80px;

margin:0 auto 1.5rem;

display:grid;

place-items:center;

font-size:2rem;

border-radius:20px;

background:var(--primary-light);

}

.planning-card p{

margin:1rem 0;

}

/*==============================
CUSTOM SECTION
==============================*/

.custom-card{

text-align:center;

}

.custom-icon{

width:80px;
height:80px;

margin:0 auto 1.5rem;

display:grid;

place-items:center;

font-size:2rem;

border-radius:20px;

background:#ffffff;

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

}

.custom-card p{

margin-top:1rem;

}

.custom-cta{

margin-top:4rem;

padding:3rem;

text-align:center;

background:white;

border-radius:24px;

box-shadow:var(--shadow);

}

.custom-cta h3{

margin-bottom:1rem;

}

.custom-cta p{

max-width:700px;

margin:0 auto 2rem;

}

/*==============================
FEATURED MONTH
==============================*/

.month-card{

position:relative;

}

.month-tag{

position:absolute;

top:20px;
left:20px;

}

.month-card h3{

margin-top:2.5rem;

}

/*==============================
TRUST SECTION
==============================*/

.trust-card{

text-align:center;

}

.trust-icon{

width:80px;
height:80px;

margin:0 auto 1.5rem;

display:grid;

place-items:center;

font-size:2rem;

border-radius:50%;

background:var(--primary);

color:white;

}

.trust-card p{

margin-top:1rem;

}

/*==============================
HOVER EFFECTS
==============================*/

.study-card:hover img{

transform:scale(1.05);

}

.study-card img{

transition:.5s;

}

.interest-card:hover .interest-icon,
.favorite-card:hover .favorite-icon,
.season-card:hover .season-icon,
.why-card:hover .why-icon,
.planning-card:hover .planning-icon,
.custom-card:hover .custom-icon,
.trust-card:hover .trust-icon{

transform:rotate(6deg) scale(1.08);

transition:.35s ease;

}

.card-link{

font-weight:700;

}

.card-link:hover{

color:var(--primary-dark);

}

/*==============================
RESPONSIVE
==============================*/

@media (max-width:900px){

.study-grid,
.favorite-grid,
.activity-grid,
.season-grid,
.interest-grid,
.why-grid,
.planning-grid,
.custom-grid,
.featured-month-grid,
.trust-grid{

grid-template-columns:1fr;

}

.study-footer{

flex-direction:column;

gap:1rem;

align-items:flex-start;

}

.activity-meta{

flex-direction:column;

gap:.5rem;

}

.custom-cta{

padding:2rem;

}

}

/*==================================================
PART 4
NEWSLETTER • CTA • FAQ • QUICK LINKS • FOOTER
ANIMATIONS • UTILITIES • RESPONSIVE
==================================================*/

/*==============================
NEWSLETTER
==============================*/

.newsletter-section{

padding:7rem 0;

background:
linear-gradient(
135deg,
var(--primary) 0%,
var(--primary-dark) 100%
);

color:#fff;

}

.newsletter-content{

max-width:900px;

margin:auto;

text-align:center;

}

.newsletter-content h2{

color:#fff;

margin-bottom:1.25rem;

}

.newsletter-content>p{

color:rgba(255,255,255,.88);

font-size:1.1rem;

max-width:760px;

margin:0 auto 2.5rem;

}

.newsletter-benefits{

display:grid;

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

gap:1rem 2rem;

margin:3rem 0;

text-align:left;

}

.benefit{

display:flex;

align-items:flex-start;

gap:1rem;

padding:1rem;

background:rgba(255,255,255,.08);

border-radius:16px;

}

.benefit span{

width:34px;
height:34px;

display:grid;

place-items:center;

background:#fff;

color:var(--primary);

border-radius:50%;

font-weight:700;

flex-shrink:0;

}

.benefit p{

margin:0;

color:#fff;

}

.newsletter-form{

display:flex;

justify-content:center;

gap:1rem;

margin-top:2rem;

}

.newsletter-form input{

flex:1;

max-width:500px;

padding:1rem 1.25rem;

border:none;

border-radius:999px;

}

.newsletter-form input:focus{

outline:none;

box-shadow:0 0 0 5px rgba(255,255,255,.2);

}

.newsletter-note{

margin-top:1.5rem;

font-size:.9rem;

color:rgba(255,255,255,.75);

}

/*==============================
BOTTOM CTA
==============================*/

.bottom-cta{

text-align:center;

}

.bottom-cta h2{

margin-bottom:1rem;

}

.bottom-cta p{

max-width:760px;

margin:0 auto 2rem;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:1rem;

flex-wrap:wrap;

}

/*==============================
FAQ
==============================*/

.faq-list{

max-width:900px;

margin:0 auto;

display:grid;

gap:1rem;

}

.faq-item{

background:#fff;

border-radius:18px;

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

overflow:hidden;

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

transition:var(--transition);

}

.faq-item:hover{

box-shadow:var(--shadow);

}

.faq-item summary{

padding:1.35rem 1.75rem;

cursor:pointer;

font-weight:700;

font-size:1.05rem;

list-style:none;

position:relative;

}

.faq-item summary::-webkit-details-marker{

display:none;

}

.faq-item summary::after{

content:"+";

position:absolute;

right:1.5rem;

top:50%;

transform:translateY(-50%);

font-size:1.4rem;

font-weight:700;

color:var(--primary);

transition:.3s;

}

.faq-item[open] summary::after{

content:"−";

}

.faq-item p{

padding:0 1.75rem 1.75rem;

}

/*==============================
QUICK LINKS
==============================*/

.quick-column{

padding:2rem;

}

.quick-column h3{

margin-bottom:1.25rem;

color:var(--primary);

}

.quick-column ul{

display:grid;

gap:.8rem;

}

.quick-column a{

color:var(--text-light);

font-weight:500;

transition:.25s;

}

.quick-column a:hover{

color:var(--primary);

padding-left:8px;

}

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

.site-footer{

background:#143c30;

color:#d9e7df;

padding:5rem 0 2rem;

}

.footer-grid{

grid-template-columns:
2fr
1fr
1fr
1fr;

align-items:flex-start;

}

.footer-column{

display:flex;

flex-direction:column;

}

.footer-logo{

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

font-size:1.6rem;

font-weight:800;

color:#fff;

margin-bottom:1rem;

}

.footer-column h3{

color:#fff;

margin-bottom:1.25rem;

}

.footer-column p{

color:#cdd8d2;

}

.footer-column ul{

display:grid;

gap:.8rem;

}

.footer-column a{

color:#d5e2db;

transition:.25s;

}

.footer-column a:hover{

color:#fff;

padding-left:6px;

}

.footer-social{

display:flex;

gap:.85rem;

margin-top:1.5rem;

}

.footer-social a{

width:44px;
height:44px;

display:grid;

place-items:center;

border-radius:50%;

background:rgba(255,255,255,.08);

font-size:1.1rem;

transition:.3s;

}

.footer-social a:hover{

background:var(--primary);

transform:translateY(-4px);

}

.footer-divider{

margin:3rem 0 2rem;

border:none;

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

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

gap:2rem;

flex-wrap:wrap;

}

.footer-bottom p{

font-size:.95rem;

color:#cdd8d2;

}

/*==============================
ACCESSIBILITY
==============================*/

.sr-only{

position:absolute;

width:1px;

height:1px;

padding:0;

margin:-1px;

overflow:hidden;

clip:rect(0,0,0,0);

border:0;

}

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:50px;

}

::-webkit-scrollbar-track{

background:#edf5f1;

}

/*==============================
ANIMATIONS
==============================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.study-card,
.favorite-card,
.interest-card,
.activity-card,
.season-card,
.why-card,
.planning-card,
.custom-card,
.month-card,
.trust-card{

animation:fadeUp .7s ease both;

}

.preview-card{

animation:float 6s ease-in-out infinite;

}

/*==============================
FOCUS STATES
==============================*/

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

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

outline-offset:4px;

}

/*==============================
LARGE TABLETS
==============================*/

@media (max-width:1024px){

.footer-grid{

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

gap:3rem;

}

.newsletter-benefits{

grid-template-columns:1fr;

}

}

/*==============================
TABLETS
==============================*/

@media (max-width:768px){

section{

padding:4.5rem 0;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

max-width:100%;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.quick-links-grid{

grid-template-columns:1fr;

}

}

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

@media (max-width:600px){

.container{

width:94%;

}

.section-title{

margin-bottom:3rem;

}

.section-title p{

font-size:1rem;

}

.newsletter-benefits{

gap:1rem;

}

.benefit{

padding:1rem;

}

.btn{

width:100%;

}

.cta-buttons{

flex-direction:column;

}

.footer-social{

justify-content:center;

}

}