@font-face {
  font-family: 'segoeu';
  src: url('../fonts/segoeuithibd.ttf') format('opentype');
  font-style: normal;
}

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

/* BACKGROUND */
body{
min-height:100vh;
background-image:url("../images/Untitled design (8) (3).png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
display:flex;
flex-direction:column;
    justify-content: center;
    align-items: center;
position:relative;
}

body::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.3); 
   z-index:0;
}


/* MOBILE BACKGROUND */
@media(max-width:768px){
body{
background-image:url("../images/Untitled design (9) (2).png");
                       height: 110vh;
}
}

.logo-wrap{
text-align:center;
padding:20px 0;
}

.logo-wrap img{
max-width:180px;
height:auto;
}


/* MAIN CONTAINER */
.container{
width: 95%;
    max-width: 100vw;
margin:auto;
padding-top:5vh;
display:flex;
justify-content:center;
gap:3vw;
flex-wrap:wrap;
  z-index:1;
}




/* LOCATION BLOCK */
.location{
    width: 20%;
min-width:320px;
}



/* TOP WHITE STRIP */
.location-header{
background:white;
border:3px solid black;
text-align:center;
font-size:1.2rem;
padding:1rem;
font-weight:bold;
}


/* CARD */
.card{
position:relative;
height:33vh;
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
padding: 1rem 0.5rem 0.5rem 0.5rem;
border:3px solid black;
}


.card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5); 
   z-index:0;
}


/* CARD TEXT */
.card-content{
position:relative;
z-index:2;
font-size:1.1rem;
line-height:1.6;
}


/* BUTTON */
.btn{
position:absolute;
bottom:-2rem;
left:50%;
transform:translateX(-50%);
padding:1em 1em;
background:#bfc7ea;
border:4px solid #000;
text-decoration:none;
color:black;
font-size:1rem;
letter-spacing:0.15em;
font-weight:600;
cursor: pointer;
width: 14vw;
}


/* FOOTER */
footer{
    text-align: center;
    padding: 2vh 0;
    background: black;
    color: white;
    font-size: 0.9rem;
    width: 100vw;

}

footer a{
color:white;
text-decoration:none;
}


/* RESPONSIVE */
@media(max-width:900px){

.container{
        flex-direction: column;
        align-items: center;
        gap: 10vh;
        padding-top: 0vh;
}

.location{
width:95%;

}

.card{
height:25vh;
        padding: 1rem;
}

.location-header{
font-size:1.4rem;
}

.btn {
    padding: 1em 2em;
    font-size: 1rem;
    width: 60vw;
}

.logo-wrap {
    text-align: center;
    padding: 20px 0 0 0;
}

}