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

.hero{
height:500px;
background:url(../images/education\ banner.png) center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
position:relative;
overflow:hidden;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.45);
}

.hero h1{
position:relative;
font-size:48px;
margin-bottom:10px;
z-index:2;
letter-spacing:1px;
animation:fadeUp 1.2s ease;
}

.hero p{
position:relative;
z-index:2;
font-size:16px;
}

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


/* ===== EDUCATION SECTION START ===== */

.education{
padding:80px 0;
}

.edu-grid{
display:flex;
align-items:center;
gap:80px;
}

.edu-left{
flex:1;
display:flex;
justify-content:center;
align-items:center;
}

.edu-left img{
width:100%;
max-width:420px;
height:auto;
transition:transform .6s ease, filter .6s ease;
}

.edu-left img:hover{
transform:scale(1.05);
filter:drop-shadow(0 10px 20px rgba(0,0,0,0.2));
}

.edu-right{
flex:1;
animation:fadeLeft 1s ease;
}

.edu-right h2{
font-size:34px;
margin-bottom:20px;
}

.edu-right p{
line-height:1.7;
margin-bottom:15px;
color:#666;
max-width:540px;
text-align:justify;
}

.edu-text{
margin-top:40px;
line-height:1.7;
color:#555;
max-width:950px;
margin-left:auto;
margin-right:auto;
}

.edu-text p{
margin-bottom:20px;
text-align:justify;
}

/* ===== EDUCATION SECTION END ===== */


/* ===== REVOLUTION SECTION START ===== */

.revolution{
background:url(../images/education\ small\ banner.png) center/cover no-repeat;
color:white;
padding:80px 0;
position:relative;
}

.revolution::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.55);
}

.revolution .container{
position:relative;
z-index:2;
}

.revolution h2{
text-align:center;
font-size:36px;
margin-bottom:40px;
animation:fadeUp 1s ease;
}

.rev-list{
max-width:850px;
margin:auto;
}

.rev-item{
display:flex;
gap:15px;
margin-bottom:25px;
align-items:flex-start;
transition:transform .4s ease;
}

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

.rev-item span img{
width:28px;
margin-top:4px;
}

.rev-item p{
line-height:1.7;
color:#eee;
}

/* ===== REVOLUTION SECTION END ===== */


/* ===== RESPONSIVE SECTION START ===== */

@media (max-width:992px){

.hero{
height:420px;
}

.hero h1{
font-size:38px;
}

.edu-grid{
flex-direction:column;
text-align:center;
gap:40px;
}

.edu-right p{
margin:auto;
}

.edu-text{
padding:0 20px;
}

.rev-item{
flex-direction:column;
text-align:center;
}

.rev-item span{
margin:auto;
}

}

@media (max-width:768px){

.hero{
height:350px;
}

.hero h1{
font-size:32px;
}

.hero p{
font-size:14px;
}

.education{
padding:60px 20px;
}

.edu-right h2{
font-size:28px;
}

.edu-text{
padding:0 10px;
}

.revolution{
padding:60px 20px;
}

.revolution h2{
font-size:30px;
}

}

@media (max-width:480px){

.hero{
height:300px;
}

.hero h1{
font-size:26px;
}

.edu-right h2{
font-size:24px;
}

}

/* ===== RESPONSIVE SECTION END ===== */


/* ===== ANIMATION SECTION START ===== */

@keyframes fadeUp{
0%{opacity:0;transform:translateY(40px);}
100%{opacity:1;transform:translateY(0);}
}

@keyframes fadeLeft{
0%{opacity:0;transform:translateX(-40px);}
100%{opacity:1;transform:translateX(0);}
}

/* ===== ANIMATION SECTION END ===== */