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

.hero{
height:500px;
background:url("../images/banner.jpg") center/cover no-repeat;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
margin-top:5px;
}

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

.hero-content{
position:relative;
color:#fff;
text-align:center;
z-index:2;
animation:fadeUp 1.2s ease;
}

.hero-content h1{
font-size:44px;
margin-bottom:10px;
letter-spacing:1px;
text-shadow:0 0 12px rgba(255,255,255,0.4);
}

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



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

.section-title{
padding:50px 0 20px;
text-align:center;
animation:fadeUp 1.2s ease;
}

.section-title h2{
font-size:32px;
margin-bottom:18px;
position:relative;
display:inline-block;
}

.section-title h2::after{
content:"";
width:70%;
height:3px;
background:linear-gradient(90deg,#1e63d5,transparent);
position:absolute;
left:15%;
bottom:-6px;
border-radius:4px;
}

.section-title p{
width:72%;
margin:auto;
font-size:15px;
color:#555;
line-height:1.7;
}

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



/* ===== SERVICES SECTION START ===== */

.service{
padding:40px 0;
transition:transform .4s ease;
}

.service-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
}

.service-row.reverse{
flex-direction:row-reverse;
}

.service-text{
flex:1;
animation:fadeLeft 1s ease;
}

.service-text h3{
font-size:22px;
color:#1e63d5;
margin-bottom:18px;
position:relative;
display:inline-block;
}

.service-text h3::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:40%;
height:2px;
background:#1e63d5;
transition:width .4s ease;
}

.service:hover .service-text h3::after{
width:70%;
}

.service-text p{
font-size:14px;
color:#555;
margin-bottom:8px;
text-align:justify;
line-height:1.7;
}

.service-img{
flex:1;
text-align:center;
animation:fadeRight 1s ease;
}

.service-img img{
width:90%;
transition:transform .6s ease, filter .6s ease;
}

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

/* ===== SERVICES SECTION END ===== */



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

@media (max-width: 992px){

.hero{
height:420px;
}

.hero-content h1{
font-size:36px;
}

.section-title p{
width:85%;
}

.service-row{
flex-direction:column;
text-align:center;
}

.service-row.reverse{
flex-direction:column;
}

.service-text{
order:2;
}

.service-img{
order:1;
}

.service-img img{
width:70%;
margin-bottom:20px;
}

}

@media (max-width: 768px){

.hero{
height:350px;
}

.hero-content h1{
font-size:30px;
}

.breadcrumb{
font-size:14px;
}

.section-title{
padding:40px 15px;
}

.section-title h2{
font-size:26px;
}

.section-title p{
width:100%;
font-size:14px;
}

.service{
padding:35px 15px;
}

.service-text h3{
font-size:20px;
}

.service-text p{
font-size:14px;
}

.service-img img{
width:90%;
}

}

@media (max-width: 480px){

.hero{
height:300px;
}

.hero-content h1{
font-size:24px;
}

.section-title h2{
font-size:22px;
}

.service-text h3{
font-size:18px;
}

.service-text p{
font-size:13px;
}

}

/* ===== 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);
}
}

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

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