*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;

background-image:url("assets/MugClub.jpg");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;

background-color:rgba(0,0,0,0.45);
background-blend-mode:darken;
}



main{
max-width:900px;
margin:0 auto;
padding:60px 20px;
}



.card{
background:rgba(255,255,255,0.92);
border-radius:10px;
padding:120px 40px;

height:auto;
display:flex;
flex-direction:column;
justify-content:center;

box-shadow:0 8px 25px rgba(0,0,0,.25);

transition:all .3s ease;

margin-bottom:60px;
text-align:center;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 12px 35px rgba(0,0,0,.35);
}



.title-card{
background:#730000;
color:white;
}

.title-card h1{
font-size:3rem;
margin-bottom:15px;
}

.title-card h3{
font-size:1.5rem;
opacity:.9;
}



.card h2{
font-size:2.3rem;
margin-bottom:25px;
color:#730000;
}

.card p{
font-size:1.3rem;
line-height:1.9;
max-width:750px;
margin:0 auto;
}



.team-container{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:30px;
margin-top:20px;
}

.team-member{
flex:1 1 220px;
max-width:240px;

background:white;
padding:20px;

border-radius:10px;

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

transition:all .3s ease;

opacity:0;
transform:translateY(25px);
}

.team-member.visible{
opacity:1;
transform:translateY(0);
}

.team-member:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 12px 30px rgba(0,0,0,.3);
}

.team-member img{
width:170px;
height:170px;
border-radius:50%;
object-fit:cover;

margin-bottom:10px;

transition:all .3s ease;
}

.team-member:hover img{
transform:scale(1.08);
}

.team-member a{
display:inline-block;
margin-top:10px;

padding:8px 16px;

background:#730000;
color:white;

text-decoration:none;
border-radius:20px;

font-size:14px;

transition:all .25s ease;
}

.team-member a:hover{
background:#a80000;
transform:scale(1.05);
}



.fade-in{
opacity:0;
transform:translateY(30px);
transition:opacity .8s ease, transform .8s ease;
}

.fade-in.visible{
opacity:1;
transform:translateY(0);
}

.card ul {
  margin: 0.5rem 0 0 0;
  padding-left: 1.5rem;
}

.card ul {
  text-align: left;
  margin: 0.5rem auto 0 auto;
  padding-left: 1.5rem;
  max-width: 750px;
}