html, body{
background: #f6f7fb;
overflow-x:hidden;
width:100%;
}
/* =========================
GLOBAL STYLES
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

/* 
.menu-toggle{
display:none;
width:28px;
height:22px;
flex-direction:column;
justify-content:space-between;
cursor:pointer;
}

.menu-toggle span{
height:3px;
width:100%;
background:black;
border-radius:2px;
transition:0.3s;
}


.menu-toggle.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.menu-toggle.active span:nth-child(2){
opacity:0;
}

.menu-toggle.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
} */


/* =========================
BANNER SLIDER
========================= */

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

.hero{
background:linear-gradient(120deg,#eef0ff,#f7f8ff);
padding:80px 20px;
}

.hero-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
flex-wrap:wrap;
}

.hero-left{
flex:1;
min-width:300px;
}

.hero-left h1{
font-size:48px;
font-weight:700;
line-height:1.2;
margin-bottom:20px;
color:#1B2124;
}

.hero-left span{
color:#5A4BDA;
}

.hero-left p{
font-size:17px;
color:#444;
line-height:1.6;
margin-bottom:30px;
max-width:520px;
}

/* Hero Button */

.hero-btn{
display:inline-block;
padding:14px 34px;
font-size:17px;
font-weight:600;
background:#5A4BDA;
color:white;
border-radius:8px;
text-decoration:none;
transition:0.3s;
}

.hero-btn:hover{
background:#4437B8;
transform:translateY(-2px);
}


/* Hero Image */

.hero-right{
flex:1;
display:flex;
justify-content:center;
min-width:300px;
}

.hero-right img{
width:100%;
max-width:420px;
height:auto;
}



/* =========================
FEATURES SECTION
========================= */

.features-section{
margin-top:-70px;
padding:0 20px;
}

.features-container{
max-width:1100px;
margin:auto;
background:white;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
display:flex;
justify-content:space-between;
align-items:center;
padding:35px 10px;
flex-wrap:wrap;
}

.feature-item{
width:23%;
text-align:center;
padding:10px;
cursor:pointer;
transition:0.3s;
}

.feature-item h3{
font-size:20px;
margin-top:12px;
margin-bottom:4px;
}

.feature-item p{
font-size:14px;
color:#555;
}

.icon{
font-size:40px;
color:#5A4BDA;
transition:0.3s;
}

.divider{
width:1px;
height:70px;
background:#e5e5e5;
}


/* Hover Animation */

.feature-item:hover{
transform:translateY(-8px);
}

.feature-item:hover .icon{
transform:scale(1.2) rotate(5deg);
color:#4437B8;
}

.feature-item:hover h3{
color:#5A4BDA;
}


/* =========================
FLOATING CALL BUTTON
========================= */
.call-btn,
.insta-btn{
position:fixed;
right:20px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
z-index:9999;
will-change:transform;
}

.call-btn{
bottom:25px;
background:#5a4bdb;
width:60px;
height:60px;
border-radius:50%;
color:white;
font-size:22px;
box-shadow:0 8px 20px rgba(90,75,219,0.5);
}

/* Instagram button */

.insta-btn{
bottom:95px;
background:#E1306C;
width:60px;
height:60px;
border-radius:50%;
color:white;
font-size:22px;
box-shadow:0 8px 20px rgba(225,48,108,0.5);
}

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

.footer{
background:#0d0d0d;
color:white;
padding:60px 20px 20px;
}

.footer-container{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:40px;
}

.footer-col{
flex:1;
min-width:220px;
}

.footer h3{
font-size:22px;
margin-bottom:15px;
}

.footer h4{
font-size:18px;
margin-bottom:15px;
}

.footer p{
color:#cfcfcf;
font-size:14px;
margin-bottom:10px;
}

.footer ul{
list-style:none;
padding:0;
}

.footer ul li{
margin-bottom:10px;
}

.footer ul li a{
color:#cfcfcf;
text-decoration:none;
transition:0.3s;
}

.footer ul li a:hover{
color:#5A4BDA;
}

.social{
margin-top:15px;
}

.social a{
color:white;
margin-right:12px;
font-size:18px;
transition:0.3s;
}

.social a:hover{
color:#5A4BDA;
}

.footer hr{
border:none;
height:1px;
background:#2c2c2c;
margin:30px 0;
}

.copyright{
text-align:center;
font-size:14px;
color:#aaa;
}



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

@media(max-width:768px){

.menu-toggle{
display:flex;
}


.hero-container{
flex-direction:column;
text-align:center;
}

.hero-left h1{
font-size:34px;
}

.hero-left p{
margin:auto;
margin-bottom:25px;
}

.hero-right img{
max-width:320px;
margin-top:30px;
}

.features-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
padding:30px 15px;
}

.feature-item{
width:100%;
}

.divider{
display:none;
}

.footer-container{
flex-direction:column;
}

}
/* =========================
ABOUT PLATFORM SECTION
========================= */

.about-platform{
padding:70px 20px;
background:#f7f8ff;
}

.about-container{
max-width:900px;
margin:auto;
text-align:center;
}

.about-container h2{
font-size:32px;
margin-bottom:20px;
color:#1B2124;
}

.about-container h3{
margin-top:30px;
font-size:22px;
color:#5A4BDA;
}

.about-container p{
margin-top:10px;
font-size:16px;
line-height:1.7;
color:#444;
}



/* =========================
INSTAGRAM FLOAT BUTTON
========================= */

.insta-btn{
position:fixed;
bottom:95px;
right:20px;
background:#E1306C;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:24px;
box-shadow:0 6px 18px rgba(0,0,0,0.3);
z-index:999;
}

.insta-btn:hover{
transform:scale(1.05);
}

/* FOOTER ABOUT SECTION */

.footer-about{
max-width:1100px;
margin:40px auto 0;
padding:0 20px;
color:#cfcfcf;
}

.footer-about h3{
margin-top:25px;
margin-bottom:10px;
font-size:20px;
color:white;
}

.footer-about p{
font-size:14px;
line-height:1.7;
}


/* FOOTER BOTTOM */

.footer-bottom{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:15px;
color:#aaa;
font-size:14px;
}

.footer-links a{
margin-right:18px;
color:#aaa;
text-decoration:none;
}

.footer-links a:hover{
color:#5A4BDA;
}.insta-btn{
position:fixed;
bottom:95px;
right:20px;
background:#E1306C;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:22px;
box-shadow:0 6px 18px rgba(0,0,0,0.3);
}/* =========================
FOOTER ABOUT SECTION
========================= */

.footer-about{
max-width:1200px;
margin:50px auto 0;
padding:0 20px;
}

.about-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.about-box{
background:#141414;
padding:25px;
border-radius:10px;
transition:0.3s;
border:1px solid #1f1f1f;
}

.about-box:hover{
transform:translateY(-5px);
border-color:#5A4BDA;
}

.about-box h3{
color:white;
margin-bottom:12px;
font-size:20px;
}

.about-box p{
color:#cfcfcf;
font-size:14px;
line-height:1.7;
}.footer-bottom{
max-width:1200px;
margin:auto;
padding-top:20px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
color:#aaa;
font-size:14px;
}

.footer-links{
display:flex;
gap:20px;
}

.footer-links a{
color:#aaa;
text-decoration:none;
}

.footer-links a:hover{
color:#5A4BDA;
}.social a{
background:#141414;
width:35px;
height:35px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
margin-right:10px;
}/* Remove underline from floating buttons */

.call-btn,
.insta-btn{
text-decoration:none;
}

/* Also ensure icons don't get underline */

.call-btn i,
.insta-btn i{
text-decoration:none;
}.call-btn,
.insta-btn{
text-decoration:none;
display:flex;
align-items:center;
justify-content:center;
}

.call-btn:hover,
.insta-btn:hover{
transform:scale(1.08);
}.call-btn{
box-shadow:0 8px 20px rgba(90,75,219,0.5);
}

.insta-btn{
box-shadow:0 8px 20px rgba(225,48,108,0.5);
}/* =========================
SOCIAL ICONS
========================= */

.social a{
text-decoration:none;        /* removes underline */
color:white;
width:35px;
height:35px;
display:inline-flex;
align-items:center;
justify-content:center;
background:#141414;
border-radius:50%;
margin-right:10px;
transition:0.3s;
}

/* Hover Effect */

.social a:hover{
background:#5A4BDA;
transform:translateY(-3px);
}

/* Ensure icon itself has no underline */

.social a i{
text-decoration:none;
}.social a:nth-child(1):hover{background:#1877f2;}   /* Facebook */
.social a:nth-child(2):hover{background:#E1306C;}   /* Instagram */
.social a:nth-child(3):hover{background:#0A66C2;}   /* LinkedIn */
.social a:nth-child(4):hover{background:#25D366;}   /* WhatsApp */


/* =========================
TESTIMONIAL SECTION
========================= */

.testimonials{
background:#f6f7fb;
padding:80px 20px;
}

.testimonials-container{
max-width:1100px;
margin:auto;
}

.test-title{
text-align:center;
font-size:32px;
margin-bottom:5px;
}

.test-subtitle{
text-align:center;
color:#666;
margin-bottom:40px;
}


/* Featured Testimonial */

.featured-testimonial{
display:flex;
gap:25px;
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
margin-bottom:40px;
align-items:center;
}

.featured-testimonial img{
width:200px;
border-radius:8px;
}

.featured-text p{
color:#444;
line-height:1.6;
}

.tag{
display:inline-block;
margin-top:10px;
font-size:12px;
background:#5A4BDA;
color:white;
padding:5px 10px;
border-radius:5px;
}


/* Testimonial Grid */

.testimonial-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.testimonial-card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.testimonial-card:hover{
transform:translateY(-6px);
}

.quote{
color:#444;
font-size:14px;
margin-bottom:20px;
line-height:1.6;
}


/* Student Info */

.student{
display:flex;
align-items:center;
gap:12px;
}

.student img{
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
}

.student h4{
font-size:14px;
margin:0;
}

.student span{
font-size:12px;
color:#777;
}/* TESTIMONIAL SECTION */

.testimonials{
background:#f6f7fb;
padding:80px 20px;
}

.test-container{
max-width:1100px;
margin:auto;
}

.test-title{
text-align:center;
font-size:30px;
margin-bottom:5px;
}

.test-sub{
text-align:center;
color:#666;
margin-bottom:35px;
}


/* FEATURED */

.featured{
display:flex;
gap:20px;
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
margin-bottom:40px;
align-items:center;
}

.featured img{
width:200px;
border-radius:8px;
}

.rank{
display:inline-block;
margin-top:10px;
background:#5A4BDA;
color:white;
font-size:12px;
padding:5px 10px;
border-radius:5px;
}


/* SLIDER */

.testimonial-slider{
position:relative;
display:flex;
align-items:center;
}

.slider-track{
display:flex;
gap:20px;
overflow-x:auto;
scroll-behavior:smooth;
padding:10px;
}

/* hide scrollbar */

.slider-track::-webkit-scrollbar{
display:none;
}

.slider-track{
-ms-overflow-style:none;
scrollbar-width:none;
}


/* CARDS */

.card{
min-width:280px;
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.card:hover{
transform:translateY(-6px);
}

.card p{
font-size:14px;
line-height:1.6;
color:#444;
margin-bottom:20px;
}


/* STUDENT */

.student{
display:flex;
align-items:center;
gap:10px;
}

.student img{
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
}

.student h4{
font-size:14px;
margin:0;
}

.student span{
font-size:12px;
color:#777;
}


/* ARROWS */

.arrow{
background:white;
border:none;
width:40px;
height:40px;
border-radius:50%;
box-shadow:0 3px 10px rgba(0,0,0,0.2);
font-size:22px;
cursor:pointer;
position:absolute;
z-index:10;
}

@media(max-width:768px){

.left{
left:5px;
}

.right{
right:5px;
}

.arrow{
width:34px;
height:34px;
font-size:18px;
}

}/* =========================
TESTIMONIAL MOBILE FIX
========================= */

@media(max-width:768px){

.featured{
flex-direction:column;
text-align:center;
padding:18px;
}

.featured img{
width:100%;
max-width:220px;
margin:auto;
}

.featured-text{
margin-top:10px;
}

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

.slider-track{
gap:15px;
padding:5px;
}

.card{
min-width:240px;
}

}.testimonials{
padding-bottom:120px;
}@media(max-width:768px){

.test-title{
font-size:24px;
}

.test-sub{
font-size:14px;
}

.card p{
font-size:13px;
}

}.slider-track{
scroll-snap-type:x mandatory;
}

.card{
scroll-snap-align:start;
}/* =========================
FOOTER MOBILE FIX
========================= */

@media(max-width:768px){

.footer{
padding:50px 20px 30px;
}

/* Stack footer columns */

.footer-container{
flex-direction:column;
text-align:center;
gap:35px;
}

/* Better spacing */

.footer-col{
min-width:100%;
}

/* Center social icons */

.social{
display:flex;
justify-content:center;
margin-top:15px;
}

/* Links spacing */

.footer ul li{
margin-bottom:12px;
}

/* Contact text alignment */

.footer-col p{
font-size:14px;
line-height:1.6;
}

/* Footer About Section */

.footer-about{
margin-top:30px;
}

.about-grid{
grid-template-columns:1fr;
}

/* About boxes */

.about-box{
text-align:center;
padding:20px;
}

/* Footer Bottom */

.footer-bottom{
flex-direction:column;
text-align:center;
gap:12px;
}

/* Footer links */

.footer-links{
justify-content:center;
flex-wrap:wrap;
gap:15px;
}

}.footer-col h4{
margin-top:10px;
}.footer-links a{
font-size:13px;
}/* =========================
FOOTER MOBILE FIX
========================= */

@media(max-width:768px){

.footer-container{
flex-direction:column;
align-items:flex-start;   /* align columns left */
text-align:left;          /* make text left */
gap:35px;
}

/* headings */

.footer-col h3,
.footer-col h4{
text-align:left;
}

/* links */

.footer ul{
padding-left:0;
}

.footer ul li{
text-align:left;
}

/* social icons stay left */

.social{
justify-content:flex-start;
}

/* footer bottom */

.footer-bottom{
flex-direction:column;
align-items:flex-start;
text-align:left;
gap:10px;
}

/* footer policy links */

.footer-links{
justify-content:flex-start;
}

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

.call-btn,
.insta-btn{
right:15px;
}

}
/* =========================
STATS SECTION
========================= */

.stats-section{
padding:80px 20px;
background:#f6f7fb;
text-align:center;
}

.stats-title{
font-size:32px;
margin-bottom:10px;
}

.stats-sub{
color:#666;
margin-bottom:45px;
}

.stats-container{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:25px;
}

/* CARD */

.stat-card{
background:#f4eadf;
border-radius:15px;
padding:35px 20px;
position:relative;
overflow:hidden;
transition:0.35s;
cursor:pointer;
}

.stat-card:nth-child(2){background:#f2e2e2;}
.stat-card:nth-child(3){background:#dfeff4;}
.stat-card:nth-child(4){background:#e6e2f4;}

.stat-card h3{
font-size:32px;
margin-bottom:8px;
}

.stat-card p{
color:#444;
font-size:15px;
}

/* hidden graphic */
.features-section{
margin-top:30px;
padding:0 20px;
max-width:1200px;
margin-left:auto;
margin-right:auto;
}.stat-card:hover .stat-icon{ transform:scale(1.2) rotate(8deg); }

/* hover animation */

.stat-card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.stat-card:hover .stat-icon{
bottom:10px;
opacity:1;
}.stat-icon{
font-size:55px;
color:#5A4BDA;
margin-bottom:15px;
transition:0.35s;
}

.stat-card:hover .stat-icon{
transform:scale(1.2) rotate(8deg);
}

/* button */

.stats-btn{
display:inline-block;
margin-top:40px;
background:#5A4BDA;
color:white;
padding:12px 28px;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

.stats-btn:hover{
background:#4437B8;
transform:translateY(-2px);
}.hero-btn,
.stats-btn{
transition:all .3s ease;
}

.hero-btn:hover,
.stats-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 8px 20px rgba(0,0,0,0.2);
}.stat-card{
background:#f4eadf;
border-radius:15px;
padding:35px 20px;
transition:all .35s ease;
cursor:pointer;
}

.stat-card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 12px 30px rgba(0,0,0,0.15);
}.feature-item{
width:23%;
text-align:center;
padding:15px;
cursor:pointer;
transition:all .35s ease;
}

.feature-item:hover{
transform:translateY(-10px) scale(1.03);
}

.feature-item:hover .icon{
transform:scale(1.2) rotate(8deg);
}/* HERO */

.hero{
background:linear-gradient(120deg,#eef0ff,#f7f8ff);
padding:90px 20px 120px;
}

.hero-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
flex-wrap:wrap;
}

.hero-left{
flex:1;
min-width:300px;
}

.hero-left h1{
font-size:48px;
margin-bottom:20px;
}

.hero-left span{
color:#5A4BDA;
}

.hero-left p{
font-size:17px;
margin-bottom:30px;
color:#444;
}

.hero-btn{
padding:14px 34px;
background:#5A4BDA;
color:white;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.hero-btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

/* floating image */

.hero-right img{
max-width:420px;
animation:float 4s ease-in-out infinite;
}

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-15px);}
100%{transform:translateY(0);}
}



/* FEATURES */

.features-section{
margin-top:-70px;
padding:0 20px;
max-width:1200px;
margin-left:auto;
margin-right:auto;
}

.feature-item{
width:23%;
text-align:center;
padding:15px;
transition:.3s;
}

.feature-item:hover{
transform:translateY(-10px);
}

.icon{
font-size:40px;
color:#5A4BDA;
margin-bottom:10px;
}

.divider{
width:1px;
height:70px;
background:#e5e5e5;
}



/* STATS */

.stats-section{
padding:90px 20px;
background:#f6f7fb;
text-align:center;
}

.stats-title{
font-size:32px;
margin-bottom:10px;
}

.stats-sub{
color:#666;
margin-bottom:45px;
}

.stats-container{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:25px;
}

.stat-card{
border-radius:15px;
padding:35px 20px;
background:#f4eadf;
transition:.3s;
}

.stat-card:nth-child(2){background:#f2e2e2;}
.stat-card:nth-child(3){background:#dfeff4;}
.stat-card:nth-child(4){background:#e6e2f4;}

.stat-card:hover{
transform:translateY(-10px);
box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

.stat-icon{
font-size:55px;
color:#5A4BDA;
margin-bottom:15px;
transition:.3s;
}

.stat-card:hover .stat-icon{
transform:scale(1.2) rotate(8deg);
}

.stats-btn{
display:inline-block;
margin-top:40px;
background:#5A4BDA;
color:white;
padding:12px 28px;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.stats-btn:hover{
transform:translateY(-3px);
}

.feature-item{
transition:all .35s ease;
}

.feature-item:hover{
transform:translateY(-8px) scale(1.03);
}

.feature-item:hover .icon{
transform:scale(1.15) rotate(5deg);
}

/* =========================
FEATURES MOBILE FIX
========================= */

@media(max-width:768px){

.features-section{
margin-top:-40px;
padding:0 15px;
}

.features-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

/* remove divider completely */

.divider{
display:none;
}

/* feature card */

.feature-item{
width:100%;
padding:18px 10px;
border-radius:10px;
transition:0.3s;
}

/* icon */

.icon{
font-size:34px;
margin-bottom:8px;
}

/* title */

.feature-item h3{
font-size:16px;
margin-bottom:4px;
}

/* description */

.feature-item p{
font-size:12px;
line-height:1.4;
}

}.feature-item:hover{
background:#f5f7ff;
}


/* =========================
BLOG SECTION
========================= */

.blog-section{
padding:80px 20px;
background:#f6f7fb;
}

.blog-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:2fr 1fr;
gap:40px;
}

/* Blog Card */

.blog-card{
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
margin-bottom:30px;
transition:0.3s;
}

.blog-card:hover{
transform:translateY(-5px);
}

.blog-card img{
width:100%;
height:220px;
object-fit:cover;
}

.blog-content{
padding:20px;
}

.blog-content h2{
font-size:22px;
margin-bottom:10px;
}

.blog-content p{
color:#555;
font-size:14px;
line-height:1.6;
}

.read-more{
display:inline-block;
margin-top:10px;
color:#5A4BDA;
text-decoration:none;
font-weight:600;
}

/* Sidebar */

.blog-sidebar{
display:flex;
flex-direction:column;
gap:25px;
}

.sidebar-box{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.sidebar-box h3{
margin-bottom:10px;
}

.sidebar-box ul{
list-style:none;
}

.sidebar-box ul li{
margin-bottom:8px;
cursor:pointer;
}

.ad-box{
height:250px;
display:flex;
align-items:center;
justify-content:center;
background:#f0f0f0;
}@media(max-width:768px){

.blog-container{
grid-template-columns:1fr;
}

.blog-card img{
height:180px;
}

}

.blog-hero{
background:linear-gradient(120deg,#eef0ff,#f7f8ff);
padding:70px 20px;
text-align:center;
}

.blog-hero h1{
font-size:42px;
margin-bottom:10px;
}

.blog-hero p{
color:#555;
margin-bottom:25px;
}

.blog-search{
display:flex;
justify-content:center;
gap:10px;
}

.blog-search input{
padding:12px;
width:300px;
border-radius:6px;
border:1px solid #ddd;
}

.blog-search button{
background:#5A4BDA;
color:white;
border:none;
padding:12px 18px;
border-radius:6px;
}/* BLOG LIST PAGE */

.blog-list{
padding:80px 20px;
background:#f6f7fb;
}

.blog-wrapper{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:2fr 1fr;
gap:40px;
}

.post-card{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
margin-bottom:30px;
transition:.3s;
}

.post-card:hover{
transform:translateY(-6px);
}

.post-card img{
width:100%;
height:220px;
object-fit:cover;
}

.post-content{
padding:20px;
}

.post-content h2{
font-size:24px;
margin:10px 0;
}

.post-content p{
color:#555;
font-size:14px;
line-height:1.6;
}

.category{
background:#5A4BDA;
color:white;
font-size:12px;
padding:4px 10px;
border-radius:5px;
}

.read-btn{
display:inline-block;
margin-top:10px;
color:#5A4BDA;
font-weight:600;
text-decoration:none;
}

/* SIDEBAR */

.blog-sidebar{
display:flex;
flex-direction:column;
gap:25px;
}

.sidebar-box{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

.sidebar-box input{
width:100%;
padding:10px;
border:1px solid #ddd;
border-radius:6px;
}

.sidebar-box ul{
list-style:none;
padding:0;
}

.sidebar-box li{
margin-bottom:10px;
color:#444;
}/* BLOG ARTICLE */

.blog-article{
padding:80px 20px;
background:#f6f7fb;
}

.article-container{
max-width:800px;
margin:auto;
background:white;
padding:40px;
border-radius:12px;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

.article-container h1{
font-size:34px;
margin-bottom:10px;
}

.meta{
color:#777;
font-size:14px;
margin-bottom:20px;
}

.article-img{
width:100%;
border-radius:10px;
margin-bottom:25px;
}

.article-content h2{
margin-top:20px;
font-size:22px;
}

.article-content p{
line-height:1.7;
color:#444;
margin-top:10px;
}@media(max-width:768px){

.blog-wrapper{
grid-template-columns:1fr;
}

.article-container{
padding:25px;
}

}/* ARTICLE PAGE */

.blog-article{
padding:80px 20px;
background:#f6f7fb;
}

.article-container{
max-width:850px;
margin:auto;
background:white;
padding:40px;
border-radius:12px;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

.article-title{
font-size:36px;
margin-bottom:10px;
}

.meta{
color:#777;
font-size:14px;
margin-bottom:20px;
}

.article-img{
width:100%;
border-radius:10px;
margin-bottom:25px;
}

.article-content h2{
margin-top:25px;
font-size:24px;
}

.article-content p{
line-height:1.8;
color:#444;
margin-top:10px;
}


/* ADS */

.ad-box{
background:#f1f1f1;
text-align:center;
padding:25px;
margin:30px 0;
border-radius:8px;
font-size:14px;
color:#777;
}


/* RELATED POSTS */

.related-posts{
margin-top:40px;
}

.related-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.related-card{
background:#fafafa;
padding:10px;
border-radius:8px;
text-align:center;
}

.related-card img{
width:100%;
border-radius:6px;
margin-bottom:8px;
}/* FEATURED BLOG */

.featured-blog{
padding:80px 20px;
}

.featured-container{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.featured-container img{
width:100%;
border-radius:12px;
}

.featured-text h2{
font-size:32px;
margin:10px 0;
}

.tag{
background:#5A4BDA;
color:white;
padding:5px 10px;
border-radius:5px;
font-size:12px;
}



/* LATEST BLOGS */

.latest-blogs{
padding:70px 20px;
background:#f6f7fb;
}

.section-title{
text-align:center;
font-size:32px;
margin-bottom:40px;
}

.blog-grid{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.blog-item{
background:white;
padding:15px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.blog-item:hover{
transform:translateY(-5px);
}

.blog-item img{
width:100%;
border-radius:8px;
margin-bottom:10px;
}

.blog-item a{
color:#5A4BDA;
text-decoration:none;
font-weight:600;
}



/* CATEGORIES */

.blog-categories{
padding:80px 20px;
}

.category-grid{
max-width:1000px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}

.cat-card{
background:white;
padding:25px;
text-align:center;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.cat-card:hover{
background:#5A4BDA;
color:white;
}



/* NEWSLETTER */

.newsletter{
padding:80px 20px;
text-align:center;
background:#f6f7fb;
}

.newsletter input{
padding:12px;
width:280px;
border-radius:6px;
border:1px solid #ddd;
margin-top:10px;
margin-right:10px;
}/* BLOG HERO ICON */

.blog-icon{
display:flex;
justify-content:center;
align-items:center;
}

.blog-icon i{
font-size:140px;
color:#5A4BDA;
background:white;
padding:40px;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,0.1);
animation:floatIcon 4s ease-in-out infinite;
}


/* Floating animation */

@keyframes floatIcon{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0);
}

}


/* HERO ICON STYLE */

.hero-icon{
display:flex;
justify-content:center;
align-items:center;
}

.hero-icon i{
font-size:140px;
color:#5A4BDA;
background:white;
padding:40px;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,0.1);
animation:floatIcon 4s ease-in-out infinite;
}

/* floating animation */

@keyframes floatIcon{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0);
}

}

/* FIX TESTIMONIAL OVERFLOW */

.slider-track{
display:flex;
gap:20px;
overflow-x:auto;
scroll-behavior:smooth;
padding:10px;
align-items:stretch;
}

.testimonial-card{
min-width:280px;
max-width:320px;
flex:0 0 auto;
background:#f3f3f3;
border-radius:12px;
padding:25px;
box-shadow:0 4px 15px rgba(0,0,0,0.06);
position:relative;
}

.testimonial-text{
margin-top:30px;
font-size:14px;
line-height:1.7;
color:#555;
}

.quote-icon{
position:absolute;
top:10px;
left:18px;
font-size:50px;
color:#d8d8d8;
font-weight:bold;
}

.student-info{
display:flex;
align-items:center;
gap:12px;
margin-top:18px;
}

.student-img{
width:45px;
height:45px;
border-radius:50%;
object-fit:cover;
}

.student-name{
font-size:15px;
font-weight:600;
margin:0;
}

.student-course{
font-size:12px;
color:#4c6ef5;
}/* FEATURED TESTIMONIAL IMPROVED */

.featured{
display:flex;
align-items:center;
gap:25px;
background:white;
padding:30px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
margin-bottom:40px;
position:relative;
}

.featured-img img{
width:70px;
height:70px;
border-radius:50%;
object-fit:cover;
border:3px solid #5A4BDA;
}

.featured-text{
position:relative;
flex:1;
}

.featured-msg{
font-size:16px;
line-height:1.7;
color:#444;
margin-bottom:12px;
}

.featured-name{
background:#5A4BDA;
color:white;
font-size:13px;
padding:6px 12px;
border-radius:6px;
display:inline-block;
}

.featured .quote-icon{
position:absolute;
top:-5px;
left:-10px;
font-size:55px;
color:#e4e4e4;
font-weight:bold;
}

/* =========================
FINAL FEATURES FIX (OVERRIDE)
========================= */

.features-container{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:20px !important;
  background:white;
  padding:30px !important;
  border-radius:16px;
}

.divider{
  display:none !important;
}

.feature-item{
  width:100% !important;
  padding:25px 15px !important;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:150px;
}

/* COLORS FIX */
.feature-item:nth-child(1){ background:linear-gradient(135deg,#fef3c7,#fde68a); }
.feature-item:nth-child(3){ background:linear-gradient(135deg,#e0f2fe,#bae6fd); }
.feature-item:nth-child(5){ background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
.feature-item:nth-child(7){ background:linear-gradient(135deg,#ede9fe,#ddd6fe); }

/* ICON FIX */
.feature-item .icon{
  font-size:50px;
  margin-bottom:10px;
}

/* TEXT FIX */
.feature-item h3{
  font-size:16px;
  margin-bottom:5px;
}

.feature-item p{
  font-size:13px;
}

/* HOVER */
.feature-item:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
}.features-container{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
}/* ===== MOBILE FIX FOR FEATURES (CRITICAL) ===== */

@media(max-width:768px){

.features-container{

grid-template-columns: 1fr 1fr !important;

gap:14px !important;

padding:18px !important;

margin-top:-30px;

}

/* each card */

.feature-item{

min-height:120px;

padding:16px 10px !important;

border-radius:14px;

}

/* icon */

.feature-item .icon{

font-size:32px !important;

margin-bottom:6px;

}

/* title */

.feature-item h3{

font-size:15px;

}

/* text */

.feature-item p{

font-size:12px;

line-height:1.3;

}

}