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

.hero{

    position:relative;

    overflow:hidden;

    background:linear-gradient(135deg,#0A2E6D 0%,#12408A 100%);

    color:red;

    padding:20px 0 90px;

}

.hero::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

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

    border-radius:50%;

    top:-250px;

    right:-200px;

}

.hero::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(76,175,40,.15);

    border-radius:50%;

    bottom:-150px;

    left:-120px;

}

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.hero-content{

    animation:fadeLeft .8s ease;

}

.hero-tag{

    display:inline-block;

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

    padding:10px 18px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

}

.hero h1{

    font-size:64px;

    line-height:1.15;

    margin-bottom:25px;

    font-weight:800;

}

.hero h1 span{

    color:#4CAF28;

}

.hero p{

    font-size:18px;

    line-height:1.8;

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

    margin-bottom:35px;

}

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

.hero-search{

    display:flex;

    background:#fff;

    border-radius:60px;

    overflow:hidden;

    margin-bottom:35px;

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

}

.hero-search input{

    flex:1;

    border:none;

    padding:20px 28px;

    font-size:16px;

    outline:none;

}

.hero-search button{

    border:none;

    background:#4CAF28;

    color:#fff;

    padding:0 35px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.hero-search button:hover{

    background:#43A047;

}

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

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 32px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.btn-primary{

    background:#4CAF28;

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(76,175,40,.35);

}

.btn-secondary{

    border:2px solid rgba(255,255,255,.35);

    color:#fff;

}

.btn-secondary:hover{

    background:#fff;

    color:#0A2E6D;

}

/*=========================================
IMAGE
=========================================*/

.hero-image{

    text-align:center;

    animation:floatImage 5s ease-in-out infinite;

}

.hero-image img{

    width:100%;

    max-width:560px;

}

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

@keyframes floatImage{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-50px);

}

to{

opacity:1;

transform:translateX(0);

}

}

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

@media(max-width:992px){

.hero{

padding:90px 0 70px;

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero h1{

font-size:48px;

}

.hero-search{

margin:auto auto 30px;

max-width:650px;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

margin-top:40px;

}

}

@media(max-width:768px){

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

.hero-search{

flex-direction:column;

border-radius:20px;

}

.hero-search input{

width:100%;

}

.hero-search button{

padding:18px;

}

.hero-buttons{

flex-direction:column;

}

.btn{

width:100%;

}

}

/*=========================================
STATISTICS
=========================================*/

.stats-section{

margin-top:-60px;

position:relative;

z-index:10;

padding-bottom:80px;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-card{

background:#fff;

border-radius:20px;

padding:35px;

text-align:center;

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

transition:.35s;

}

.stat-card:hover{

transform:translateY(-10px);

}

.stat-icon{

width:75px;

height:75px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#E8F5E9;

color:#4CAF28;

font-size:30px;

}

.stat-card h2{

font-size:40px;

font-weight:800;

color:#0A2E6D;

margin-bottom:10px;

}

.stat-card p{

font-size:16px;

color:#666;

margin:0;

}

@media(max-width:992px){

.stats-grid{

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

}

}

@media(max-width:768px){

.stats-grid{

grid-template-columns:1fr;

}

.stats-section{

margin-top:40px;

}

}



/*=========================================
SECTION TITLE
=========================================*/

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-tag{

display:inline-block;

background:#E8F5E9;

color:#4CAF28;

padding:8px 20px;

border-radius:30px;

font-weight:600;

margin-bottom:20px;

}

.section-heading h2{

font-size:42px;

font-weight:800;

color:#0A2E6D;

margin-bottom:20px;

}

.section-heading p{

max-width:700px;

margin:auto;

color:#666;

font-size:18px;

line-height:1.8;

}

/*=========================================
EDUCATION LEVELS
=========================================*/

.education-levels{

padding:100px 0;

background:#fff;

position:relative;

overflow:hidden;

}

.education-levels::before{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:rgba(10,46,109,.03);

top:-220px;

right:-180px;

}

.education-levels::after{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:rgba(76,175,40,.05);

bottom:-180px;

left:-120px;

}

.levels-grid{

position:relative;

z-index:2;

display:grid;

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

gap:30px;

}

.level-card{

background:#fff;

border-radius:25px;

padding:35px;

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

transition:.35s;

position:relative;

overflow:hidden;

border-top:5px solid transparent;

}

.level-card:hover{

transform:translateY(-12px);

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

}

.level-card h3{

font-size:24px;

margin:25px 0 15px;

color:#0A2E6D;

font-weight:700;

}

.level-card p{

color:#666;

line-height:1.8;

margin-bottom:25px;

}

.level-icon{

width:90px;

height:90px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

margin-bottom:20px;

background:#F5F9FC;

transition:.35s;

}

.level-card:hover .level-icon{

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

}

.level-info{

display:flex;

justify-content:space-between;

margin-bottom:30px;

padding-top:18px;

border-top:1px solid #eee;

font-size:14px;

font-weight:600;

color:#666;

}

.level-card a{

display:inline-flex;

align-items:center;

gap:10px;

text-decoration:none;

font-weight:700;

color:#0A2E6D;

transition:.3s;

}

.level-card a i{

transition:.3s;

}

.level-card:hover a i{

transform:translateX(6px);

}


.ecde{

border-color:#4CAF28;

}

.ecde .level-icon{

background:#E8F5E9;

}

.primary{

border-color:#2196F3;

}

.primary .level-icon{

background:#E3F2FD;

}

.junior{

border-color:#FF9800;

}

.junior .level-icon{

background:#FFF3E0;

}

.senior{

border-color:#9C27B0;

}

.senior .level-icon{

background:#F3E5F5;

}

@media(max-width:1200px){

.levels-grid{

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

}

}

@media(max-width:768px){

.education-levels{

padding:70px 0;

}

.levels-grid{

grid-template-columns:1fr;

}

.section-heading h2{

font-size:34px;

}

}

/*=========================================
GRADE EXPLORER
=========================================*/

.grade-explorer{

padding:100px 0;

background:#F5F9FC;

}

.grade-group{

margin-bottom:60px;

}

.grade-group h3{

margin-bottom:25px;

font-size:28px;

color:#0A2E6D;

font-weight:700;

}

.grade-grid{

display:grid;

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

gap:20px;

}

.grade-grid a{

display:flex;

align-items:center;

justify-content:center;

height:75px;

background:#fff;

border-radius:18px;

text-decoration:none;

font-weight:700;

font-size:18px;

color:#0A2E6D;

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

transition:.35s;

border:2px solid transparent;

}

.grade-grid a:hover{

background:#0A2E6D;

color:#fff;

transform:translateY(-6px);

border-color:#4CAF28;

box-shadow:0 18px 35px rgba(10,46,109,.18);

}

@media(max-width:768px){

.grade-group h3{

font-size:22px;

}

.grade-grid{

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

}

}

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

.featured-resources{

padding:100px 0;

background:#fff;

}

.resources-grid{

display:grid;

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

gap:35px;

}

.resource-card{

background:#fff;

border-radius:22px;

overflow:hidden;

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

transition:.35s;

}

.resource-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 55px rgba(0,0,0,.12);

}

.resource-image{

position:relative;

height:220px;

overflow:hidden;

}

.resource-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.resource-card:hover img{

transform:scale(1.08);

}
.premium-badge{

position:absolute;

top:18px;

right:18px;

background:#FFC107;

color:#222;

padding:8px 16px;

border-radius:30px;

font-size:13px;

font-weight:700;

}

.resource-content{

padding:30px;

}

.resource-content h3{

font-size:22px;

margin-bottom:15px;

color:#0A2E6D;

font-weight:700;

}

.resource-content p{

color:#666;

margin-bottom:20px;

}

.resource-meta{

display:flex;

justify-content:space-between;

margin-bottom:25px;

color:#777;

font-size:15px;

}

.resource-meta span{

display:flex;

align-items:center;

gap:8px;

}

.resource-btn{

display:inline-flex;

align-items:center;

gap:10px;

text-decoration:none;

padding:14px 22px;

background:#0A2E6D;

color:#fff;

border-radius:12px;

font-weight:600;

transition:.3s;

}

.resource-btn:hover{

background:#4CAF28;

color:#fff;

}

.resource-btn i{

transition:.3s;

}

.resource-btn:hover i{

transform:translateX(5px);

}

@media(max-width:768px){

.resources-grid{

grid-template-columns:1fr;

}

}

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

.featured-tutorials{

padding:100px 0;

background:#081C45;

color:#fff;

}

.tutorial-grid{

display:grid;

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

gap:35px;

}

.tutorial-card{

background:#ffffff;

border-radius:25px;

overflow:hidden;

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

transition:.35s;

}

.tutorial-card:hover{

transform:translateY(-10px);

}

.tutorial-image{

position:relative;

height:240px;

overflow:hidden;

}

.tutorial-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.tutorial-card:hover img{

transform:scale(1.08);

}

.play-button{

position:absolute;

top:50%;

left:50%;

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

width:80px;

height:80px;

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

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:36px;

color:#0A2E6D;

cursor:pointer;

transition:.3s;

}

.play-button:hover{

background:#4CAF28;

color:#fff;

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

}

.video-duration{

position:absolute;

bottom:15px;

right:15px;

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

color:#fff;

padding:6px 12px;

border-radius:8px;

font-size:13px;

font-weight:600;

}

.tutorial-content{

padding:28px;

}

.tutorial-grade{

display:inline-block;

margin-bottom:12px;

color:#4CAF28;

font-weight:700;

font-size:14px;

}

.tutorial-content h3{

font-size:24px;

font-weight:700;

color:#0A2E6D;

margin-bottom:12px;

}

.tutorial-content p{

color:#666;

line-height:1.8;

margin-bottom:20px;

}

.tutorial-meta{

display:flex;

justify-content:space-between;

margin-bottom:25px;

color:#777;

font-size:14px;

}

.tutorial-meta span{

display:flex;

align-items:center;

gap:8px;

}

.watch-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 22px;

background:#0A2E6D;

color:#fff;

text-decoration:none;

border-radius:12px;

font-weight:600;

transition:.3s;

}

.watch-btn:hover{

background:#4CAF28;

color:#fff;

}

.watch-btn i{

transition:.3s;

}

.watch-btn:hover i{

transform:translateX(5px);

}

@media(max-width:768px){

.featured-tutorials{

padding:70px 0;

}

.tutorial-grid{

grid-template-columns:1fr;

}

}

/*=========================================
WHY CHOOSE
=========================================*/

.why-choose{

padding:100px 0;

background:#F8FAFC;

}

.features-grid{

display:grid;

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

gap:35px;

margin-top:50px;

}

.feature-card{

background:#fff;

padding:40px 30px;

border-radius:22px;

text-align:center;

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

transition:.35s;

border:1px solid #eef2f7;

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 55px rgba(0,0,0,.12);

}

.feature-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:linear-gradient(135deg,#0A2E6D,#4CAF28);

display:flex;

justify-content:center;

align-items:center;

font-size:36px;

color:#fff;

margin-bottom:25px;

transition:.35s;

}

.feature-card:hover .feature-icon{

transform:rotate(10deg) scale(1.1);

}

.feature-card h3{

font-size:24px;

font-weight:700;

margin-bottom:15px;

color:#0A2E6D;

}

.feature-card p{

color:#666;

line-height:1.8;

}

@media(max-width:768px){

.why-choose{

padding:70px 0;

}

.features-grid{

grid-template-columns:1fr;

}

}

/*=========================================
POPULAR SUBJECTS
=========================================*/

.popular-subjects{

padding:100px 0;

background:#ffffff;

}

.subjects-grid{

display:grid;

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

gap:30px;

}

.subject-card{

background:#fff;

padding:35px;

border-radius:22px;

text-align:center;

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

transition:.35s;

border-top:5px solid #0A2E6D;

}

.subject-card:hover{

transform:translateY(-10px);

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

}

.subject-icon{

width:80px;

height:80px;

margin:auto;

border-radius:50%;

background:#F5F9FC;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#0A2E6D;

margin-bottom:20px;

transition:.35s;

}

.subject-card:hover .subject-icon{

background:#0A2E6D;

color:#fff;

transform:rotate(10deg);

}

.subject-card h3{

font-size:22px;

font-weight:700;

margin-bottom:10px;

color:#0A2E6D;

}

.subject-card p{

color:#777;

margin-bottom:20px;

}

.subject-card a{

display:inline-flex;

align-items:center;

gap:8px;

text-decoration:none;

font-weight:600;

color:#0A2E6D;

transition:.3s;

}

.subject-card a:hover{

color:#4CAF28;

}

.subject-card a i{

transition:.3s;

}

.subject-card a:hover i{

transform:translateX(5px);

}

@media(max-width:768px){

.popular-subjects{

padding:70px 0;

}

.subjects-grid{

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

gap:20px;

}

.subject-card{

padding:25px;

}

}

/*=========================================
JOIN CTA
=========================================*/

.join-section{

padding:100px 0;

background:#ffffff;

}

.join-card{

background:linear-gradient(135deg,#0A2E6D,#123E88);

padding:70px 40px;

border-radius:30px;

text-align:center;

color:#fff;

box-shadow:0 25px 60px rgba(10,46,109,.25);

}

.join-card h2{

font-size:42px;

font-weight:700;

margin-bottom:20px;

}

.join-card p{

font-size:18px;

max-width:700px;

margin:auto;

margin-bottom:40px;

opacity:.95;

}

.join-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn-login,
.btn-register{

padding:16px 34px;

border-radius:14px;

text-decoration:none;

font-weight:700;

transition:.3s;

display:inline-flex;

align-items:center;

gap:10px;

}

.btn-login{

background:#ffffff;

color:#0A2E6D;

}

.btn-login:hover{

background:#4CAF28;

color:#fff;

}

.btn-register{

background:#4CAF28;

color:#fff;

}

.btn-register:hover{

background:#fff;

color:#0A2E6D;

}

@media(max-width:768px){

.join-card{

padding:50px 25px;

}

.join-card h2{

font-size:30px;

}

.join-buttons{

flex-direction:column;

}

.btn-login,
.btn-register{

justify-content:center;

width:100%;

}

}

/*=========================================
WHATSAPP COMMUNITY
=========================================*/

.whatsapp-community{

padding:100px 0;

background:#F5F9FC;

}

.whatsapp-card{

text-align:center;

padding:60px 40px;

background:#25D366;

border-radius:30px;

color:#fff;

box-shadow:0 20px 50px rgba(37,211,102,.35);

}

.whatsapp-icon{

font-size:80px;

margin-bottom:20px;

}

.whatsapp-card h2{

font-size:38px;

font-weight:700;

margin-bottom:20px;

}

.whatsapp-card p{

font-size:18px;

max-width:750px;

margin:0 auto 35px;

line-height:1.8;

}

.whatsapp-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:16px 35px;

background:#fff;

color:#25D366;

font-weight:700;

text-decoration:none;

border-radius:14px;

transition:.3s;

}

.whatsapp-btn:hover{

background:#0A2E6D;

color:#fff;

}