/* =========================
GLOBAL STYLES
========================= */

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

body{
background:#f5f7fb;
color:#333;
}



/* =========================
HEADER
========================= */

.services-header{

background: linear-gradient(rgba(15,76,117,0.9), rgba(27,154,170,0.9));
color:white;

text-align:center;

padding:70px 20px;

}

.services-header h1{

font-size:32px;
margin-bottom:10px;

}

.services-header p{

opacity:0.9;

}



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

.filter-container{

text-align:center;

padding:10px 20px;

display:flex;
justify-content:center;
flex-wrap:wrap;

gap:5px;

}



/* FILTER BUTTON */

.filter-btn{

padding:5px 5px;

border:none;

background:#e5ebf3;
color:#333;

border-radius:6px;

cursor:pointer;

transition:all 0.3s ease;

font-size:14px;

}



/* ACTIVE BUTTON */

.filter-btn.active{

background:#0a6fb7;
color:white;

}



/* FADE EFFECT FOR INACTIVE BUTTONS */

.filter-btn:not(.active){

opacity:0.6;

}

.filter-btn:hover{

opacity:1;

}



/* =========================
SERVICES GRID
========================= */

.services-grid{

/* max-width:1200px; */

margin:auto;

padding:20px;

display:flex;
flex-wrap: wrap;

/* grid-template-columns:repeat(auto-fit,minmax(310px,2fr)); */

gap:30px;
justify-content: center;

}



/* =========================
SERVICE CARD
========================= */

.service-card{

background:white;
/* width: 300px;
height: 500px; */

border-radius:12px;

overflow:hidden;

box-shadow:0 5px 15px rgba(0,0,0,0.08);

transition:0.3s ease;

display:flex;
flex-direction:column;

}

.service-card:hover{

transform:translateY(-6px);

}



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

/* .service-image{

width:100%;

height:200px;

overflow:hidden;

background:#f5f7fb;

} */



/* DEFAULT IMAGE STYLE */

/* .service-image img{

width:100%;
height:100%;

object-fit:cover;

transition:0.4s ease;

} */



/* WHEN CARD EXPANDS */

.service-card img{

object-fit:cover;

background:#f5f7fb;

}



/* =========================
SERVICE INFO
========================= */

.service-info{

padding:20px;

flex:1;

display:flex;
flex-direction:column;

}



.service-info h3{

color:#0a6fb7;

margin-bottom:10px;

font-size:18px;

}



.short-text{

font-size:14px;

line-height:1.5;

}



/* HIDDEN TEXT */

.more-text{

display:none;
max-width: 350px;

margin-top:10px;

font-size:14px;

line-height:1.6;

color:#555;

}



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

.read-btn{

margin-top:15px;

padding:8px 16px;

border:none;

background:#0a6fb7;

color:white;

border-radius:6px;

cursor:pointer;

font-size:13px;

transition:0.3s;

align-self:flex-start;

}

.read-btn:hover{

background:#085a94;

}



/* =========================
MOBILE FIXED FILTER BAR
========================= */

@media (max-width:768px){

.filter-container{

position:fixed;

bottom:0;
left:0;

width:100%;

display:grid;

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

background:white;

padding:10px;

box-shadow:0 -3px 10px rgba(0,0,0,0.1);

z-index:999;

}



.filter-btn{

font-size:12px;

padding:8px;

}



.services-grid{

padding-bottom:90px;

}

.gap{
  height: 100px;
}

}



/* =========================
SMALL MOBILE
========================= */

@media (max-width:480px){

.services-header h1{

font-size:26px;

}

.services-grid{

grid-template-columns:1fr;

}

}