.practiceHeader{

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;

}

.practiceOverlay{

background:rgba(0,0,0,0.7);

width:100%;

height:100%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

color:white;

}

.practiceOverlay h1{

font-size:40px;

font-family:Montserrat;

margin:0;

}

.practiceOverlay p{

color:#ddd;

margin-top:10px;

}
.practiceAreas{

padding:70px 10%;

background:#f7f7f7;

}

.practiceTitle{

text-align:center;

font-family:Montserrat;

font-size:32px;

margin-bottom:15px;

}

.practiceIntro{

text-align:center;

color:#666;

width:60%;

margin:auto;

margin-bottom:40px;

}

.practiceGrid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}

.practiceBox{

background:white;

padding:25px;

border:1px solid #eee;

transition:.3s;

}

.practiceBox:hover{

background:black;

color:white;

transform:translateY(-8px);

}

.practiceBox p{

color:#666;

}

.practiceBox:hover p{

color:#ccc;

}

@media(max-width:900px){

.practiceGrid{

grid-template-columns:1fr;

}

.practiceIntro{

width:100%;

}

}
/* 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%;

}

}