.cities-section{

background:linear-gradient(180deg,#fdf7e8 0%,#f6e6c0 50%,#f3e2b6 100%);
padding:110px 8%;

}

.cities-wrapper{

max-width:1200px;
margin:auto;
text-align:center;

}

.cities-badge{

border:1px solid #d4af37;
color:#111;
padding:10px 22px;
border-radius:30px;
font-size:14px;
display:inline-block;
margin-bottom:25px;
background:#fff6dc;

}

/* HEADING */

#citiesHeading{

font-size:42px;
color:#111;
font-weight:700;
margin-bottom:15px;

}

/* LORDS GRACE TEXT EFFECT */

.brand-light{

position:relative;
color:#d4af37;
font-weight:700;
}

.brand-light::after{

content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.9),transparent);
animation:shine 3s infinite;

}

@keyframes shine{

100%{
left:120%;
}

}

.cities-top p{

color:#333;
max-width:700px;
margin:auto;
line-height:1.7;

}

/* BUTTONS */

.cities-buttons{

margin-top:30px;

}

.btn-gold{

background:linear-gradient(45deg,#d4af37,#f1cc5b);
color:black;
padding:14px 28px;
border-radius:30px;
text-decoration:none;
font-weight:600;
margin-right:10px;
box-shadow:0 6px 15px rgba(0,0,0,0.15);
transition:.3s;

}

.btn-gold:hover{

transform:translateY(-3px);

}

.btn-outline{

border:1px solid #d4af37;
color:black;
padding:14px 28px;
border-radius:30px;
text-decoration:none;

}

.btn-outline:hover{

background:#d4af37;

}

/* TITLE */

.cities-title{

margin-top:70px;
font-size:28px;
color:#111;

}

/* SLIDER */

.cities-slider{

margin-top:40px;
overflow:hidden;
position:relative;

}

.cities-track{

display:flex;
gap:25px;
transition:transform .6s ease;

}

/* CITY CARD */

.city{

text-align:center;
min-width:160px;

}

.city img{

width:140px;
height:180px;
border-radius:20px;
object-fit:cover;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
transition:.35s;

}

.city img:hover{

transform:scale(1.08);

}

.city span{

margin-top:10px;
display:block;
color:#111;
font-weight:500;

}

/* DOTS */

.cities-dots{

display:flex;
justify-content:center;
gap:10px;
margin-top:30px;

}

.cities-dots span{

width:12px;
height:12px;
background:#d8c48a;
border-radius:50%;
cursor:pointer;
transition:.3s;

}

.cities-dots span.active{

background:#d4af37;
transform:scale(1.3);

}

/* MOBILE */

@media(max-width:768px){

#citiesHeading{
font-size:28px;
}

.city{
min-width:120px;
}

.city img{
width:100px;
height:140px;
}

}