/* TEAM HEADER */

.teamHeader{

height:300px;

background:url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

}

.teamOverlay{

background:rgba(0,0,0,0.75);

width:100%;

height:100%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

color:white;

}

.teamOverlay h1{

font-size:40px;

font-family:Montserrat;

margin:0;

}

.teamOverlay p{

color:#ddd;

margin-top:10px;

}


/* TEAM SECTION */

.teamSection{

padding:70px 10%;

background:#f7f7f7;

}

.teamTitle{

text-align:center;

font-family:Montserrat;

font-size:30px;

margin-bottom:40px;

}


.teamGrid{

display:grid;

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

gap:30px;

}


.teamCard{

background:white;

padding:30px;

text-align:center;

border:1px solid #eee;

transition:.3s;

}

.teamCard:hover{

background:black;

color:white;

transform:translateY(-8px);

}

.teamCard img{

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

margin-bottom:15px;

}

.teamCard p{

color:#666;

}

.teamCard:hover p{

color:#ccc;

}


/* MOBILE */

@media(max-width:900px){

.teamGrid{

grid-template-columns:1fr;

}

.teamHeader{

height:220px;

}

.teamOverlay h1{

font-size:28px;

}

}
.teamSection{

padding:80px 10%;

background:#f7f7f7;

}

.teamTitle{

text-align:center;

font-family:Montserrat;

font-size:32px;

margin-bottom:40px;

}


.teamGrid{

display:grid;

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

gap:25px;

}


.teamCard{

background:white;

padding:30px;

text-align:center;

border:1px solid #eee;

transition:.3s;

}

.teamCard:hover{

background:black;

color:white;

transform:translateY(-8px);

}


/* PROFILE ICON */

.profileIcon{

width:120px;

height:120px;

border-radius:50%;

border:1px solid #ddd;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

margin-bottom:15px;

background:#f2f2f2;

}


.teamCard:hover .profileIcon{

background:#222;

border:1px solid #444;

}

.teamCard:hover .profileIcon svg{

stroke:white;

}


.teamCard h3{

margin:10px 0;

font-family:Montserrat;

}


.teamCard p{

color:#666;

margin:5px 0;

}

.teamCard span{

font-size:13px;

color:#999;

}

.teamCard:hover p,
.teamCard:hover span{

color:#ccc;

}


/* MOBILE */

@media(max-width:900px){

.teamGrid{

grid-template-columns:1fr;

}

}
/* POPUP */

.popup{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,0.7);

display:none;

align-items:center;

justify-content:center;

z-index:2000;

}

/* CONTENT */

.popupContent{

background:white;

padding:35px;

width:400px;

border-radius:8px;

position:relative;

animation:popup .3s;

}

@keyframes popup{

from{transform:scale(.8);}

to{transform:scale(1);}

}

.popupContent h2{

margin-top:0;

font-family:Montserrat;

}

/* CLOSE */

.closeBtn{

position:absolute;

right:15px;

top:10px;

font-size:20px;

cursor:pointer;

}

/* FORM */

.popupContent input,
.popupContent select,
.popupContent textarea{

width:100%;

padding:10px;

margin:8px 0;

border:1px solid #ddd;

font-family:Open Sans;

}

.popupContent textarea{

height:90px;

resize:none;

}

.bookBtn{

width:100%;

background:black;

color:white;

border:none;

padding:12px;

cursor:pointer;

margin-top:10px;

transition:.3s;

}

.bookBtn:hover{

background:#C8A96A;

}

/* MOBILE */

@media(max-width:500px){

.popupContent{

width:90%;

}

}