*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;

background:white;
overflow-x:hidden;
overflow-y:auto;

/* background image */
background-image:url("sakura.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}

/* MAIN CONTAINER */

.album-container{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}

/* PAGE SLIDER */

.page{
position:absolute;
width:100%;
height:100%;
top:0;

transform:translateX(100%);
transition:transform .6s ease;

display:flex;
flex-direction:column;

/* allow scrolling inside page */
overflow-y:auto;
}

.page.active{
transform:translateX(0);
}

.page.prev{
transform:translateX(-100%);
}

/* IMAGE SECTION */

.image-section{
flex:2;
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
}

/* CARD */

.card{
background:white;
border:3px solid #c72c48;
border-radius:30px;
padding:30px;
text-align:center;

max-width:600px;
margin:auto;

box-shadow:4px 6px 20px rgba(0,0,0,0.15);
transition:transform 0.3s ease;
}

/* CARD HOVER */

.card:hover{
transform:scale(1.05);
}

/* CARD IMAGE */

.card img{
width:100%;
max-height:350px;
object-fit:cover;

border-radius:20px;
border:4px solid rgba(199,44,72,0.5);

box-shadow:3px 4px 14px rgba(0,0,0,0.25);
}

/* CONTENT SECTION */

.content-section{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
}

/* TEXT */

h1{
font-size:2.5rem;
margin-bottom:10px;

}

h2{
font-size:1.2rem;
color:black;

margin-bottom:20px;
}

p{
max-width:700px;
line-height:1.6;
color:black;
}

/* NAVIGATION BUTTONS */

.nav-button{
position:absolute;
top:50%;
transform:translateY(-50%);
background:white;
border:none;
padding:15px;
cursor:pointer;
font-size:20px;
border-radius:50%;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.nav-left{
left:20px;
}

.nav-right{
right:20px;
}

/* PAGE INDICATOR */

.page-indicator{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
font-size:12px;
color:#888;
}

/* RESERVATION FORM */

.reservation-form{
display:flex;
flex-direction:column;
gap:10px;
margin-top:20px;
width:300px;
}

.reservation-form input,
.reservation-form textarea{
padding:10px;
border:1px solid #ccc;
border-radius:4px;
}

.reservation-form button{
padding:10px;
border:none;
background:black;
color:white;
cursor:pointer;
}

/* SOCIAL LINKS */

.social-links{
display:flex;
gap:20px;
margin-top:20px;
align-items:center;
justify-content:center;
}

.social-links img{
width:28px;
height:28px;
}

/* MAP */

iframe{
max-width:100%;
border-radius:12px;
}

/* MOBILE */

@media (max-width:768px){

.image-section{
flex:1.4;
}

.content-section{
padding:25px;
}

h1{
font-size:1.9rem;
}

h2{
font-size:1rem;
}

p{
font-size:0.95rem;
}

.card{
max-width:90%;
padding:20px;
}

.nav-button{
padding:12px;
font-size:18px;
}

.reservation-form{
width:90%;
}

}