*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;

}

body{

background:#000;
color:white;
padding:15px;

overflow-x:hidden;

}

.container{

max-width:1400px;
margin:auto;

}

.title{

font-size:35px;

margin:20px 0;

text-align:center;

}

.places{

display:grid;

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

gap:15px;

}

.card{

background:
rgba(255,255,255,.05);

border-radius:25px;

overflow:hidden;

border:
1px solid
rgba(255,255,255,.1);

opacity:0;

transform:
translateY(60px)
rotate(-3deg);

transition:
all 1.2s ease;

animation:
float 4s ease-in-out infinite;

}


.card.show{

opacity:1;

transform:
translateY(0)
rotate(0deg);

}


.card:hover{

transform:
translateY(-10px)
scale(1.04);

box-shadow:
0 0 30px
rgba(255,255,255,.25);

}


.card img{

width:100%;
height:180px;

object-fit:cover;

transition:
transform 2s;

}


.card:hover img{

transform:
scale(1.12);

}


/* Natural floating */

@keyframes float{

0%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-8px);

}

100%{

transform:
translateY(0px);

}

}

.content{

padding:12px;

}

.content h2{

margin-bottom:8px;

font-size:18px;

}

.content p{

font-size:13px;

opacity:.7;

line-height:20px;

}



.homeBtn{

position:fixed;

left:20px;
top:20px;

width:50px;
height:50px;

display:flex;

justify-content:center;
align-items:center;

border-radius:50%;

background:
rgba(255,255,255,.1);

backdrop-filter:
blur(10px);

border:
1px solid
rgba(255,255,255,.1);

color:white;

text-decoration:none;

font-size:24px;

z-index:999;

transition:.5s;

}


.homeBtn:hover{

transform:scale(1.1);

box-shadow:
0 0 20px
rgba(255,255,255,.3);

}


/* Mobile */

@media(max-width:768px){

.places{

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

gap:10px;

}

.card img{

height:120px;

}

.content h2{

font-size:13px;

}

.content p{

font-size:10px;

}

}