*{
box-sizing:border-box;
}

body{
margin:0;
font-family:"Cairo",sans-serif;
background:#f5f7fa;
color:#111;
}


.container{
width:90%;
max-width:1200px;
margin:auto;
}


/* Hero */

.providerHero{

height:300px;

background:
linear-gradient(135deg,#0b1822,#162c3a);

border-radius:0 0 120px 120px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

}


.heroContent h1{

font-size:42px;

font-weight:900;

margin:15px 0;

}


.heroContent p{

opacity:.8;

font-size:18px;

}



.logoText{

font-weight:900;

letter-spacing:8px;

font-size:20px;

}



/* categories */


.categories{

display:flex;

gap:12px;

justify-content:center;

flex-wrap:wrap;

margin-top:-35px;

margin-bottom:50px;

}



.categories a{

background:white;

padding:12px 25px;

border-radius:50px;

text-decoration:none;

color:#111;

font-weight:900;

box-shadow:0 15px 40px #0002;

}



.categories a.active{

background:#00a859;

color:white;

}



/* Grid */


.providersGrid{

display:grid;

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

gap:30px;

}



/* Card */


.providerCard{

background:white;

border-radius:35px;

overflow:hidden;

box-shadow:0 20px 60px #0001;

transition:.3s;

}



.providerCard:hover{

transform:translateY(-8px);

}



.cardTop{

height:130px;

background:
linear-gradient(135deg,#00a859,#f5b400);

}



.providerLogo{

width:100px;

height:100px;

border-radius:50%;

background:white;

padding:7px;

margin:-50px auto 0;

position:relative;

box-shadow:0 15px 30px #0003;

}



.providerLogo img{

width:100%;

height:100%;

border-radius:50%;

object-fit:cover;

}



.cardBody{

text-align:center;

padding:25px;

}



.cardBody h2{

font-size:25px;

font-weight:900;

margin:10px;

}



.service{

color:#00a859;

font-weight:900;

}



.desc{

color:#777;

height:55px;

overflow:hidden;

}



.discount{

margin:20px 0;

padding:15px;

background:#fff1bd;

border-radius:15px;

font-weight:900;

color:#9b7200;

font-size:18px;

}



.actions{

display:flex;

gap:10px;

}



.actions a{

flex:1;

padding:13px;

border-radius:15px;

text-decoration:none;

font-weight:900;

}



.call{

background:#00a859;

color:white;

}


.details{

background:#111820;

color:white;

}



@media(max-width:900px){

.providersGrid{

grid-template-columns:1fr;

}

.providerHero h1{

font-size:30px;

}

}