/* GRID */

.city-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.card{
position:relative;
overflow:hidden;
border-radius:6px;
}

.card img{
width:100%;
height:170px;
object-fit:cover;
display:block;
filter: brightness( 0.7);
}

/* OVERLAY TEXT */

.overlay{
position:absolute;
top:10px;
left:15px;
color:white;
}

.overlay h4{
margin:0;
font-size:20px;
font-weight:bold;
}

.overlay p{
margin:2px 0 0;
font-size:13px;
}

/* BUTTON */

.btn-box{
margin:40px 0;
}

.btn{
background:#4aa4df;
color:white;
padding:15px 35px;
border-radius:40px;
text-decoration:none;
font-weight:bold;
font-size:18px;
display:inline-flex;
align-items:center;
gap:10px;
}

.btn:hover{
background:#2c8dcc;
}

/* TEXT SECTION */

.text-section{
margin-top:20px;
}

.text-section h1{
font-size:50px;
margin-bottom:20px;
font-weight: 800;
}

.text-section p{
color:#555;
line-height:1.7;
font-size:16px;
max-width:850px;
margin-bottom: 1rem;
text-align: justify;
}


.holidy-line{
    font-size: 24px;
    font-weight:800;
    margin-bottom: 1rem;
}

.holidy-trip{
    margin: 1rem 0;
}


/* =========================
TABLET
========================= */

@media (max-width:992px){

.city-grid{
grid-template-columns:repeat(2,1fr);
}

.text-section h1{
font-size:40px;
}

}


/* =========================
MOBILE
========================= */

@media (max-width:767px){

.city-grid{
grid-template-columns:1fr;
gap:12px;
}

.card img{
height:200px;
}

.overlay h4{
font-size:22px;
}

.overlay p{
font-size:14px;
}

.btn-box{
text-align:center;
}

.btn{
font-size:16px;
padding:12px 28px;
}

.text-section h1{
font-size:30px;
line-height:1.3;
}

.text-section p{
font-size:15px;
}

.holidy-line{
font-size:20px;
}

}