@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root{

--navy:#071529;
--blue:#123D7A;
--gold:#D4AF37;
--gold2:#F5C542;
--white:#ffffff;
--light:#F8FAFC;
--border:#E2E8F0;
--text:#64748B;

}

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

.sccoria-resource-library{

font-family:'Outfit',sans-serif;
background:#F8FAFC;
overflow:hidden;

}

.resource-library-container{

max-width:1500px;
margin:auto;
padding:0 20px;

}

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

.resource-library-hero{

padding:110px 0 160px;

background:
linear-gradient(
135deg,
#071529 0%,
#0C2140 50%,
#123D7A 100%
);

position:relative;
overflow:hidden;

}

.resource-library-hero::before{

content:'';

position:absolute;

width:700px;
height:700px;

top:-250px;
right:-250px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(212,175,55,.18),
transparent
);

}

.resource-library-hero::after{

content:'';

position:absolute;

width:500px;
height:500px;

left:-150px;
bottom:-150px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,255,255,.08),
transparent
);

}

.library-hero-content{

max-width:1000px;
margin:auto;

text-align:center;

position:relative;
z-index:2;

}

.library-badge{

display:inline-flex;

padding:12px 24px;

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

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

backdrop-filter:blur(10px);

border-radius:999px;

color:#fff;

font-size:13px;
font-weight:700;

letter-spacing:2px;

margin-bottom:24px;

}

.library-hero-content h1{

font-size:clamp(38px,6vw,78px);

font-weight:900;

line-height:1.05;

color:#fff;

margin-bottom:25px;

}

.library-hero-content p{

max-width:900px;

margin:auto;

font-size:20px;

line-height:1.8;

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

}

/* =====================================================
   CATEGORY SECTION
===================================================== */

.resource-categories{

margin-top:-70px;

position:relative;
z-index:10;

padding-bottom:90px;

}

.resource-category-grid{

display:grid;

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

gap:20px;

}

.resource-category-card{

background:#fff;

padding:28px 18px;

border-radius:28px;

text-align:center;

box-shadow:
0 20px 50px rgba(0,0,0,.06);

transition:.35s;

}

.resource-category-card:hover{

transform:
translateY(-10px);

}

.resource-category-card span{

display:block;

font-size:42px;

margin-bottom:14px;

}

.resource-category-card h3{

font-size:15px;

font-weight:700;

color:var(--navy);

}

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

.resource-search-section{

padding-bottom:80px;

}

.resource-search-box{

background:#fff;

padding:45px;

border-radius:32px;

box-shadow:
0 20px 50px rgba(0,0,0,.05);

text-align:center;

}

.resource-search-box h2{

font-size:36px;

font-weight:800;

color:var(--navy);

margin-bottom:25px;

}

.resource-search-box input{

width:100%;

height:68px;

padding:0 25px;

border:2px solid #E2E8F0;

border-radius:18px;

outline:none;

font-size:16px;

}

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

.section-heading{

margin-bottom:40px;

}

.section-heading span{

display:block;

font-size:12px;

font-weight:700;

letter-spacing:2px;

color:var(--gold);

margin-bottom:12px;

}

.section-heading h2{

font-size:42px;

font-weight:900;

line-height:1.1;

color:var(--navy);

}

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

.featured-resource-section{

padding-bottom:90px;

}

.featured-resource-grid{

display:grid;

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

gap:28px;

}

.featured-resource-card{

background:#fff;

border-radius:30px;

overflow:hidden;

text-decoration:none;

box-shadow:
0 15px 40px rgba(0,0,0,.05);

transition:.35s;

}

.featured-resource-card:hover{

transform:
translateY(-10px);

}

.featured-resource-image{

height:360px;

background:#fff;

overflow:hidden;

}

.featured-resource-image img{

width:100%;
height:100%;

object-fit:contain;

display:block;

background:#fff;

}

.featured-resource-content{

padding:24px;

}

.resource-type-badge{

display:inline-block;

padding:8px 14px;

background:#FFF7DD;

color:#8A6500;

font-size:12px;

font-weight:700;

border-radius:999px;

margin-bottom:15px;

}

.featured-resource-content h3{

font-size:24px;

font-weight:800;

line-height:1.4;

color:var(--navy);

margin-bottom:10px;

}

.featured-resource-content small{

font-size:14px;

color:var(--text);

}

/* =====================================================
   RESOURCE GRID
===================================================== */

.resource-directory-section{

padding-bottom:100px;

}

.resource-library-grid{

display:grid;

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

gap:30px;

}

.resource-library-card{

background:#fff;

border-radius:30px;

overflow:hidden;

position:relative;

box-shadow:
0 15px 40px rgba(0,0,0,.05);

transition:.35s;

}

.resource-library-card:hover{

transform:
translateY(-10px);

}

.premium-tag{

position:absolute;

top:15px;
right:15px;

z-index:20;

padding:10px 16px;

background:
linear-gradient(
135deg,
#F5C542,
#D4AF37
);

border-radius:999px;

font-size:11px;

font-weight:800;

color:#071529;

}

.resource-card-image{

height:330px;

background:#fff;

overflow:hidden;

padding:20px;

}

.resource-card-image img{

width:100%;
height:100%;

object-fit:contain;

display:block;

background:#fff;

}

.resource-card-content{

padding:25px;

}

.resource-card-top{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:15px;

}

.resource-chip{

padding:8px 14px;

background:#EEF4FF;

border-radius:999px;

font-size:12px;

font-weight:700;

color:#123D7A;

}

.resource-card-content h3{

font-size:24px;

font-weight:800;

line-height:1.4;

color:var(--navy);

margin-bottom:15px;

}

.resource-subject{

font-size:15px;

font-weight:700;

color:var(--gold);

margin-bottom:15px;

}

.resource-card-content p{

font-size:15px;

line-height:1.8;

color:var(--text);

margin-bottom:18px;

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;

}

.resource-meta{

display:flex;

flex-direction:column;

gap:8px;

margin-bottom:20px;

}

.resource-meta div{

font-size:13px;

color:var(--text);

}

.resource-meta strong{

color:var(--navy);

}

.resource-buttons{

display:grid;

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

gap:10px;

}

.resource-view-btn,
.resource-download-btn,
.resource-open-btn{

display:flex;

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

height:48px;

border-radius:14px;

text-decoration:none;

font-size:13px;

font-weight:700;

transition:.3s;

}

.resource-view-btn{

background:#071529;
color:#fff;

}

.resource-download-btn{

background:#123D7A;
color:#fff;

}

.resource-open-btn{

background:#D4AF37;
color:#071529;

}

.resource-view-btn:hover,
.resource-download-btn:hover,
.resource-open-btn:hover{

transform:
translateY(-3px);

}

/* =====================================================
   PAGINATION
===================================================== */

.resource-pagination{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:10px;

margin-top:60px;

}

.resource-pagination .page-numbers{

width:50px;
height:50px;

display:flex;

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

background:#fff;

border-radius:12px;

text-decoration:none;

font-weight:700;

color:#071529;

box-shadow:
0 10px 25px rgba(0,0,0,.05);

}

.resource-pagination .current{

background:#D4AF37;

color:#071529;

}

/* =====================================================
   TABLET
===================================================== */

@media(max-width:1200px){

.resource-category-grid{

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

}

.featured-resource-grid{

grid-template-columns:
1fr 1fr;

}

.resource-library-grid{

grid-template-columns:
1fr 1fr;

}

}

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

@media(max-width:768px){

.resource-library-container{

padding:0 15px;

}

.resource-library-hero{

padding:80px 0 140px;

}

.library-hero-content p{

font-size:16px;

}

.resource-category-grid{

grid-template-columns:
1fr 1fr;

gap:12px;

}

.featured-resource-grid{

grid-template-columns:
1fr;

}

.resource-library-grid{

grid-template-columns:
1fr 1fr;

gap:14px;

}

.resource-card-image{

height:220px;

padding:12px;

}

.resource-card-content{

padding:15px;

}

.resource-card-content h3{

font-size:16px;

line-height:1.4;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;

}

.resource-buttons{

grid-template-columns:
1fr;

}

.resource-view-btn,
.resource-download-btn,
.resource-open-btn{

height:42px;

font-size:12px;

}

.resource-search-box{

padding:25px;

}

.resource-search-box h2{

font-size:28px;

}

}

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

@media(max-width:480px){

.resource-library-grid{

grid-template-columns:
1fr 1fr;

}

.resource-category-grid{

grid-template-columns:
1fr 1fr;

}

.library-hero-content h1{

font-size:34px;

}

.resource-card-content h3{

font-size:15px;

}

.resource-chip{

font-size:10px;

padding:6px 10px;

}

}