/*=========================================
RESOURCES PAGE
=========================================*/

.resources-page{

background:#F5F9FC;

padding-bottom:100px;

}

.resource-search{

margin-top:-70px;

position:relative;

z-index:20;

}

.search-card{

background:#fff;

padding:50px;

border-radius:25px;

box-shadow:0 25px 60px rgba(0,0,0,.08);

text-align:center;

}

.search-card h2{

font-size:36px;

font-weight:700;

color:#0A2E6D;

margin-bottom:15px;

}

.search-card p{

color:#666;

margin-bottom:35px;

}

.search-box{

display:flex;

max-width:800px;

margin:auto;

overflow:hidden;

border-radius:15px;

border:2px solid #EEF2F7;

}

.search-box input{

flex:1;

padding:18px 22px;

border:none;

font-size:17px;

outline:none;

}

.search-box button{

padding:0 35px;

border:none;

background:#0A2E6D;

color:#fff;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.search-box button:hover{

background:#4CAF28;

}

@media(max-width:768px){

.search-card{

padding:35px 25px;

}

.search-box{

flex-direction:column;

}

.search-box button{

padding:18px;

}

}

.resources-layout{

padding:70px 0;

}

.resources-wrapper{

display:grid;

grid-template-columns:300px 1fr;

gap:35px;

align-items:start;

}

.resource-sidebar{

position:sticky;

top:110px;

}

.filter-card{

background:#fff;

border-radius:20px;

padding:30px;

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

}

.filter-card h3{

margin-bottom:25px;

color:#0A2E6D;

font-size:24px;

}

.filter-group{

margin-bottom:20px;

}

.filter-group label{

display:block;

margin-bottom:8px;

font-weight:600;

}

.filter-group select{

width:100%;

padding:13px;

border:1px solid #ddd;

border-radius:10px;

}

.filter-btn{

width:100%;

padding:14px;

border:none;

background:#4CAF28;

color:#fff;

font-weight:700;

border-radius:12px;

cursor:pointer;

transition:.3s;

}

.filter-btn:hover{

background:#0A2E6D;

}

.featured-placeholder,
.grid-placeholder{

background:#fff;

padding:60px;

border-radius:20px;

margin-bottom:30px;

text-align:center;

font-size:26px;

font-weight:700;

color:#0A2E6D;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

@media(max-width:992px){

.resources-wrapper{

grid-template-columns:1fr;

}

.resource-sidebar{

position:static;

}

}

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

.featured-resource{

background:#fff;

border-radius:24px;

overflow:hidden;

display:grid;

grid-template-columns:380px 1fr;

box-shadow:0 20px 45px rgba(0,0,0,.08);

margin-bottom:40px;

}

.featured-image{

position:relative;

height:100%;

}

.featured-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.featured-badge{

position:absolute;

top:20px;

left:20px;

background:#FFC107;

padding:10px 18px;

border-radius:30px;

font-weight:700;

color:#222;

}

.featured-content{

padding:45px;

display:flex;

flex-direction:column;

justify-content:center;

}

.resource-category{

display:inline-block;

margin-bottom:15px;

color:#4CAF28;

font-weight:700;

text-transform:uppercase;

letter-spacing:1px;

font-size:14px;

}

.featured-content h2{

font-size:36px;

color:#0A2E6D;

margin-bottom:20px;

font-weight:700;

}
.featured-content p{

font-size:17px;

line-height:1.8;

color:#666;

margin-bottom:30px;

}

.featured-meta{

display:flex;

flex-wrap:wrap;

gap:25px;

margin-bottom:35px;

}

.featured-meta span{

display:flex;

align-items:center;

gap:8px;

font-weight:600;

color:#555;

}

.featured-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.btn-download{

background:#4CAF28;

color:#fff;

padding:14px 28px;

border-radius:12px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.btn-download:hover{

background:#0A2E6D;

color:#fff;

}

.btn-preview{

background:#fff;

border:2px solid #0A2E6D;

color:#0A2E6D;

padding:14px 28px;

border-radius:12px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.btn-preview:hover{

background:#0A2E6D;

color:#fff;

}

@media(max-width:992px){

.featured-resource{

grid-template-columns:1fr;

}

.featured-image{

height:280px;

}

.featured-content{

padding:30px;

}

.featured-content h2{

font-size:30px;

}

}


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

.resource-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(300px,1fr));

gap:30px;

}
.resource-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

}

.resource-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(0,0,0,.15);

}
.resource-image{

position:relative;

height:220px;

overflow:hidden;

}

.resource-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.resource-card:hover img{

transform:scale(1.08);

}
.resource-tag{

position:absolute;

top:18px;

right:18px;

background:#4CAF28;

color:#fff;

padding:8px 16px;

border-radius:30px;

font-size:13px;

font-weight:700;

}
.resource-body{

padding:25px;

}
.resource-subject{

display:block;

color:#4CAF28;

font-weight:700;

font-size:14px;

margin-bottom:10px;

text-transform:uppercase;

}
.resource-body h3{

font-size:22px;

color:#0A2E6D;

margin-bottom:18px;

line-height:1.4;

}
.resource-rating{

display:flex;

align-items:center;

gap:5px;

margin-bottom:18px;

color:#FFC107;

}

.resource-rating span{

margin-left:8px;

color:#666;

font-weight:600;

}
.resource-stats{

display:flex;

justify-content:space-between;

margin-bottom:25px;

font-size:14px;

color:#666;

}

.resource-stats span{

display:flex;

align-items:center;

gap:6px;

}
.resource-actions{

display:flex;

gap:12px;

}
.preview-btn{

flex:1;

text-align:center;

padding:12px;

border:2px solid #0A2E6D;

border-radius:12px;

text-decoration:none;

color:#0A2E6D;

font-weight:700;

transition:.3s;

}

.preview-btn:hover{

background:#0A2E6D;

color:#fff;

}
.download-btn{

flex:1;

text-align:center;

padding:12px;

border-radius:12px;

background:#4CAF28;

color:#fff;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.download-btn:hover{

background:#0A2E6D;

color:#fff;

}

/*=========================================
RESOURCE TOOLBAR
=========================================*/

.resource-toolbar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

padding:25px 30px;

background:#fff;

border-radius:18px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

gap:20px;

flex-wrap:wrap;

}

.toolbar-left h3{

font-size:28px;

color:#0A2E6D;

margin-bottom:6px;

font-weight:700;

}

.toolbar-left p{

margin:0;

color:#666;

}

.toolbar-right select{

padding:14px 18px;

border:1px solid #ddd;

border-radius:10px;

min-width:220px;

font-weight:600;

background:#fff;

cursor:pointer;

transition:.3s;

}

.toolbar-right select:focus{

outline:none;

border-color:#4CAF28;

}
@media(max-width:768px){

.resource-toolbar{

flex-direction:column;

align-items:flex-start;

}

.toolbar-right{

width:100%;

}

.toolbar-right select{

width:100%;

}

}

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

.pagination-section{

margin-top:60px;

display:flex;

justify-content:center;

}

.pagination{

display:flex;

flex-wrap:wrap;

justify-content:center;

align-items:center;

gap:12px;

}

.page-number{

width:48px;

height:48px;

display:flex;

justify-content:center;

align-items:center;

border-radius:12px;

background:#fff;

text-decoration:none;

font-weight:700;

color:#0A2E6D;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.3s;

}

.page-number.active{

background:#0A2E6D;

color:#fff;

}

.page-number:hover{

background:#4CAF28;

color:#fff;

transform:translateY(-3px);

}

.page-arrow{

padding:14px 22px;

background:#fff;

border-radius:12px;

text-decoration:none;

color:#0A2E6D;

font-weight:700;

display:flex;

align-items:center;

gap:10px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.3s;

}

.page-arrow:hover{

background:#4CAF28;

color:#fff;

}

.page-dots{

padding:10px;

font-size:22px;

color:#777;

}
@media(max-width:768px){

.page-arrow{

padding:12px 16px;

font-size:14px;

}

.page-number{

width:42px;

height:42px;

}

}

.advanced-search{

display:flex;

flex-direction:column;

gap:25px;

}

.search-main{

display:flex;

gap:18px;

}

.search-input{

flex:1;

display:flex;

align-items:center;

background:#F8FAFC;

border:2px solid #E5E7EB;

border-radius:14px;

padding:0 20px;

}

.search-input i{

font-size:22px;

color:#999;

margin-right:15px;

}

.search-input input{

flex:1;

border:none;

background:none;

height:60px;

outline:none;

font-size:17px;

}

.search-main button{

padding:0 35px;

border:none;

border-radius:14px;

background:#0A2E6D;

color:#fff;

font-weight:700;

transition:.3s;

}

.search-main button:hover{

background:#4CAF28;

}

.quick-filters{

display:grid;

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

gap:15px;

}

.quick-filters select{

padding:14px;

border-radius:12px;

border:1px solid #ddd;

background:#fff;

}

.clear-btn{

background:#F44336;

color:#fff;

border:none;

border-radius:12px;

font-weight:700;

transition:.3s;

}

.clear-btn:hover{

background:#C62828;

}

@media(max-width:992px){

.search-main{

flex-direction:column;

}

.quick-filters{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:576px){

.quick-filters{

grid-template-columns:1fr;

}

}

/*=========================================
PREVIEW MODAL
=========================================*/

.preview-modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.75);

display:flex;

justify-content:center;

align-items:center;

visibility:hidden;

opacity:0;

transition:.35s;

z-index:9999;

}

.preview-modal.active{

visibility:visible;

opacity:1;

}

.preview-box{

width:95%;

max-width:1000px;

background:#fff;

border-radius:24px;

padding:35px;

position:relative;

}

.close-preview{

position:absolute;

top:20px;

right:20px;

border:none;

background:none;

font-size:28px;

cursor:pointer;

}

.preview-grid{

display:grid;

grid-template-columns:350px 1fr;

gap:35px;

}

.preview-image img{

width:100%;

border-radius:18px;

display:block;

}

.preview-meta{

display:flex;

gap:20px;

flex-wrap:wrap;

margin:25px 0;

}

.preview-buttons{

display:flex;

gap:15px;

margin-top:20px;

}

.close-btn{

padding:12px 24px;

border:none;

border-radius:12px;

background:#eee;

font-weight:700;

cursor:pointer;

}

@media(max-width:900px){

.preview-grid{

grid-template-columns:1fr;

}

}



.play-overlay{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

font-size:60px;

color:#ffffff;

background:rgba(0,0,0,.45);

width:90px;

height:90px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

transition:.3s;

}

.resource-card:hover .play-overlay{

transform:translate(-50%,-50%) scale(1.1);

}

.tutorial-duration{

margin:12px 0;

font-size:14px;

color:#666;

display:flex;

align-items:center;

gap:8px;

}

/*=========================================
VIDEO PREVIEW
==========================================*/

.preview-video{

width:100%;

}

.video-wrapper{

position:relative;

padding-bottom:56.25%;

height:0;

overflow:hidden;

border-radius:12px;

background:#000;

}

.video-wrapper iframe{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:none;

}

.tutorial-preview-box{

max-width:1200px;

}

.preview-meta{

display:flex;

gap:20px;

flex-wrap:wrap;

margin:20px 0;

}

.preview-meta span{

display:flex;

align-items:center;

gap:8px;

color:#666;

font-size:14px;

}



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

.search-heading{
    text-align:center;
    margin-bottom:2rem;
}

.search-heading h2{
    font-size:2rem;
    margin-bottom:.6rem;
}

.search-heading p{
    max-width:750px;
    margin:auto;
    color:#666;
}

.tutorial-count{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    margin-top:1.2rem;
    padding:.7rem 1.3rem;
    border-radius:40px;
    background:#eef7ff;
    color:var(--primary-color);
    font-weight:600;
}

.tutorial-count i{
    font-size:1.1rem;
}

.quick-filters{
    margin-top:1.5rem;
}

/*=========================================
VIDEO PREVIEW MODAL
=========================================*/

.tutorial-preview-modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.82);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

padding:30px;

}

.tutorial-preview-modal.active{

display:flex;

}

.tutorial-preview-box{

background:#fff;

width:100%;

max-width:1000px;

border-radius:18px;

overflow:hidden;

position:relative;

animation:tutorialModalAnimation .35s ease;

}

@keyframes tutorialModalAnimation{

from{

transform:translateY(40px);

opacity:0;

}

to{

transform:translateY(0);

opacity:1;

}

}

.tutorial-preview-close{

position:absolute;

top:15px;

right:15px;

width:45px;

height:45px;

border:none;

border-radius:50%;

background:#fff;

cursor:pointer;

font-size:20px;

z-index:10;

}

.tutorial-preview-loading{

padding:120px;

text-align:center;

}

.tutorial-spinner{

width:50px;

height:50px;

border:5px solid #ddd;

border-top:5px solid #0A2E6D;

border-radius:50%;

margin:auto;

animation:spinTutorial 1s linear infinite;

}

@keyframes spinTutorial{

100%{

transform:rotate(360deg);

}
}



/*=========================================
TUTORIAL PREVIEW CONTENT
=========================================*/

.tutorial-preview-wrapper{

display:grid;

grid-template-columns:1.4fr 1fr;

gap:30px;

padding:30px;

}

.tutorial-preview-video video{

width:100%;

border-radius:14px;

background:#000;

}

.tutorial-preview-details h2{

margin:15px 0;

font-size:30px;

color:#0A2E6D;

}

.tutorial-preview-details p{

line-height:1.8;

color:#666;

margin-bottom:25px;

}

.tutorial-preview-meta{

display:grid;

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

gap:20px;

margin-bottom:25px;

}

.tutorial-preview-meta strong{

display:block;

color:#0A2E6D;

margin-bottom:5px;

}

.tutorial-preview-stats{

display:flex;

gap:30px;

margin:25px 0;

font-weight:600;

}

.tutorial-download-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 30px;

background:#0A2E6D;

color:#fff;

border-radius:8px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.tutorial-download-btn:hover{

background:#154ba6;

}

@media(max-width:900px){

.tutorial-preview-wrapper{

grid-template-columns:1fr;

}

}

/*=========================================
TUTORIAL GRID
=========================================*/

.tutorial-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.tutorial-card{

background:#fff;

border-radius:16px;

overflow:hidden;

box-shadow:0 10px 35px rgba(0,0,0,.08);

transition:.35s;

}

.tutorial-card:hover{

transform:translateY(-8px);

}

.tutorial-image{

position:relative;

height:220px;

overflow:hidden;

}

.tutorial-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.tutorial-card:hover img{

transform:scale(1.05);

}

.tutorial-tag{

position:absolute;

top:15px;

left:15px;

background:#ff3d00;

color:#fff;

padding:6px 16px;

border-radius:30px;

font-size:13px;

font-weight:700;

}

.tutorial-play{

position:absolute;

inset:0;

display:flex;

justify-content:center;

align-items:center;

font-size:70px;

color:#fff;

background:rgba(0,0,0,.25);

transition:.35s;

}

.tutorial-card:hover .tutorial-play{

background:rgba(0,0,0,.45);

}

.tutorial-body{

padding:25px;

}

.tutorial-subject{

font-size:14px;

color:#777;

}

.tutorial-body h3{

margin:12px 0;

font-size:22px;

color:#0A2E6D;

line-height:1.5;

}

.tutorial-rating{

display:flex;

gap:3px;

align-items:center;

color:#FFC107;

margin-bottom:20px;

}

.tutorial-rating span{

margin-left:10px;

color:#666;

}

.tutorial-stats{

display:flex;

justify-content:space-between;

margin-bottom:25px;

font-size:14px;

color:#666;

}

.tutorial-actions{

display:flex;

gap:15px;

}

.tutorial-actions a{

flex:1;

text-align:center;

padding:12px;

border-radius:8px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.tutorial-actions .preview-btn{

background:#0A2E6D;

color:#fff;

}

.tutorial-actions .download-btn{

background:#28a745;

color:#fff;

}

.tutorial-actions a:hover{

transform:translateY(-2px);

}

.no-tutorials{

text-align:center;

padding:100px 20px;

grid-column:1/-1;

}

.no-tutorials i{

font-size:70px;

color:#0A2E6D;

margin-bottom:20px;

}

.no-tutorials h3{

font-size:28px;

margin-bottom:10px;

}

.no-tutorials p{

color:#666;

}

/*=========================================
ELIMU TUTORIAL LOADER
=========================================*/

.tutorial-loading{
    padding:70px 30px;
    text-align:center;
}

.tutorial-spinner{
    width:55px;
    height:55px;
    border:5px solid #e5e7eb;
    border-top:5px solid #0A2E6D;
    border-radius:50%;
    margin:auto;
    animation:tutorialSpin .8s linear infinite;
}

.tutorial-loading p{
    margin-top:20px;
    font-size:15px;
    color:#555;
}

@keyframes tutorialSpin{

    to{
        transform:rotate(360deg);
    }

}

.tutorial-error{

    padding:60px 20px;

    text-align:center;

}

.tutorial-error h3{

    color:#dc2626;

    margin-bottom:10px;

}


/*====================================================
CONTACT PAGE
ElimuKenyaHub
====================================================*/


/*====================================================
MAIN SECTION
====================================================*/

.contact-page{

    overflow:hidden;

}


.contact-form-section{

    padding:90px 0;

    background:#f5f9fc;

}



/*====================================================
CONTACT WRAPPER
====================================================*/

.contact-wrapper{

    display:grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap:70px;

    align-items:center;

}



/*====================================================
LEFT CONTENT
====================================================*/


.contact-intro{

    max-width:520px;

}


.section-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:rgba(10,46,109,0.08);

    color:#0A2E6D;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:700;

}



.contact-intro h2{


    font-size:42px;

    line-height:1.2;

    margin:20px 0;

    color:#081C45;

    font-weight:800;


}



.contact-intro p{


    color:#555;

    font-size:17px;

    line-height:1.8;


}




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


.contact-benefits{


    margin-top:35px;

    display:flex;

    flex-direction:column;

    gap:18px;


}



.benefit-item{


    display:flex;

    align-items:center;

    gap:18px;

    font-weight:600;

    color:#333;


}



.benefit-item i{


    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#0A2E6D;

    color:white;

    border-radius:50%;

    font-size:18px;


}




/*====================================================
FORM CARD
====================================================*/


.contact-form-card{


    background:#ffffff;

    padding:45px;

    border-radius:24px;

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


}



.contact-form-card form{

    width:100%;

}




/*====================================================
FORM GRID
====================================================*/


.form-row{


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:22px;


}



/*====================================================
INPUTS
====================================================*/


.form-group{


    margin-bottom:24px;


}



.form-group label{


    display:block;

    margin-bottom:9px;

    color:#081C45;

    font-size:15px;

    font-weight:700;


}



.form-group input,
.form-group textarea{


    width:100%;

    border:1px solid #dce4ef;

    background:#ffffff;

    padding:16px 18px;

    border-radius:12px;

    font-size:15px;

    color:#333;

    transition:all .3s ease;


}



.form-group input::placeholder,
.form-group textarea::placeholder{


    color:#999;


}



.form-group input:focus,
.form-group textarea:focus{


    border-color:#0A2E6D;

    box-shadow:0 0 0 4px rgba(10,46,109,.1);

    outline:none;


}



.form-group textarea{


    resize:none;


}




/*====================================================
BUTTON
====================================================*/


.contact-form-card .btn{


    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 32px;

    border-radius:50px;

    font-weight:700;

    transition:.3s ease;


}



.contact-form-card .btn:hover{


    transform:translateY(-3px);


}




/*====================================================
COMMUNITY CTA SPACE
====================================================*/


.contact-page .community-cta{


    margin-top:0;

}



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


@media(max-width:1100px){


.contact-wrapper{


    grid-template-columns:1fr;

    gap:45px;


}


.contact-intro{


    max-width:100%;


}


}





@media(max-width:768px){


.contact-form-section{


    padding:60px 0;


}



.contact-form-card{


    padding:30px 22px;


}



.contact-intro h2{


    font-size:32px;


}



.form-row{


    grid-template-columns:1fr;


}


}