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

body{


background:#f4f6f9;


}

.employees-container{


width:90%;
max-width:1200px;

margin:40px auto;


}

/* =========================
Top / Back Button
========================= */

.top-actions{


margin-bottom:25px;


}

.back-btn{


display:inline-block;

background:#053734;

border:none;

border-radius:10px;

cursor:pointer;

transition:.3s;

padding:12px 22px;

text-decoration:none;

color:white;


}

.back-btn:hover{


background:#D4AF37;


}

/* =========================
Page Header
========================= */

.employees-container h1{


text-align:center;

color:#053734;

margin-bottom:10px;


}

.page-description{


text-align:center;

color:#666;

margin-bottom:40px;


}

/* =========================
Employees Grid
========================= */

.employees-grid{


display:grid;

grid-template-columns:
    repeat(
        auto-fit,
        minmax(280px,1fr)
    );

gap:25px;


}

/* =========================
Employee Card
========================= */

.employee-card{


background:#fff;

border-radius:15px;

padding:25px;

text-align:center;

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

transition:.3s;


}

.employee-card:hover{


transform:translateY(-5px);

box-shadow:
    0 10px 20px rgba(0,0,0,.15);


}

/* =========================
Employee Photo
========================= */

.avatar{


width:120px;

height:120px;

border-radius:50%;

background:#053734;

color:white;

font-size:45px;

display:flex;

justify-content:center;

align-items:center;

margin:0 auto 20px;

overflow:hidden;

border:4px solid #D4AF37;


}

/* Uploaded image */

.avatar img{


width:100%;

height:100%;

object-fit:cover;

display:block;


}

/* Default avatar */

.default-avatar{


width:100%;

height:100%;

display:flex;

justify-content:center;

align-items:center;

font-size:50px;


}

/* =========================
Name
========================= */

.employee-card h2{


color:#053734;

margin-bottom:8px;

font-size:22px;


}

/* =========================
Position
========================= */

.position{


display:inline-block;

background:#D4AF37;

color:white;

padding:6px 15px;

border-radius:20px;

margin-bottom:20px;

font-size:15px;


}

/* =========================
Information
========================= */

.info{


text-align:right;

direction:rtl;


}

.info p{


margin:10px 0;

color:#444;

line-height:1.8;


}

/* Phone / Email */

.info a{


color:#053734;

text-decoration:none;

transition:.3s;

word-break:break-word;


}

.info a:hover{


color:#D4AF37;


}

/* =========================
Description
========================= */

.description{


margin-top:20px;

padding-top:15px;

border-top:1px solid #ddd;

color:#666;

line-height:2;

text-align:right;


}

/* =========================
Mobile
========================= */

@media(max-width:768px){


.employees-container{

    width:95%;

    margin:25px auto;

}


.employee-card{

    padding:20px;

}


.avatar{

    width:105px;

    height:105px;

}


.employee-card h2{

    font-size:20px;

}


.position{

    font-size:14px;

}


}

@media(max-width:480px){


.employees-grid{

    grid-template-columns:1fr;

}


.back-btn{

    width:100%;

    text-align:center;

}


}