@font-face{
font-family:"MyriadPro";
src:url("fonts/MyriadPro-Regular.woff") format("woff");
font-weight:normal;
font-style:normal;
}

@font-face{
font-family:"Myriad Pro Condensed";
src:url("fonts/MYRIADPRO-BOLDCOND.woff") format("woff");
font-weight:normal;
font-style:normal;
}

@font-face{
font-family:"MyriadPro-Bold";
src:url("fonts/MyriadPro-Bold.woff") format("woff");
font-weight:bold;
font-style:normal;
}

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

body{
height:100vh;
overflow:hidden;
font-family:MyriadPro;
color:white;
background:#000;
}

/* cinematic background */

.bg{
position:absolute;
width:100%;
height:100%;
background:url("img/bg.jpg") center/cover;
filter:brightness(0.75) contrast(1.1) saturate(1.1);
z-index:-2;
}


.gradient{
position:absolute;
width:100%;
height:100%;
background:radial-gradient(circle at center,#00000022,#000000cc);
z-index:-1;
}

/* spotlight effect */

.spotlight{
position:absolute;
width:300px;
height:300px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,215,120,0.25),transparent 70%);
pointer-events:none;
mix-blend-mode:screen;
}

/* title */

.title{
position:absolute;
top:10px;
width:100%;
text-align:center;
font-family:"MyriadPro", sans-serif;
font-size:52px;
letter-spacing:8px;
color:#f7d48c;
text-shadow:0 0 25px rgba(255,210,120,0.6);
animation:fade 2s ease;
}

/* subtitle */

.subtitle{
position:absolute;
top:150px;
width:100%;
text-align:center;
font-size:16px;
letter-spacing:4px;
opacity:0.8;
}

/* container */

.container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display:flex;
gap:70px;
}

/* card */

.card{
width:420px;
height:520px;
border-radius:20px;
overflow:hidden;
position:relative;
cursor:pointer;
backdrop-filter:blur(6px);
transition:0.5s;
box-shadow:0 30px 80px rgba(0,0,0,0.7);
transition: transform 0.4s ease, box-shadow 0.4s ease;
transform-style:preserve-3d;
will-change:transform;


}

.card img{
width:100%;
height:100%;
object-fit:cover;
transition:0.7s;


}

/* overlay */

.card::before{
content:"";
position:absolute;
width:100%;
height:100%;
background:linear-gradient(to top,rgba(0,0,0,0.9),transparent);
z-index:1;
}

/* light sweep */

.card::after{
content:"";
position:absolute;
top:-150%;
left:-100%;
width:60%;
height:300%;
background:rgba(255,255,255,0.2);
transform:rotate(25deg);
transition:0.8s;
}

.card:hover::after{
top:120%;
left:120%;
}

/* text */

.info{
position:absolute;
bottom:30px;
left:30px;
z-index:2;


}

.info h1{
  font-family: "Myriad Pro Condensed", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size:36px;

letter-spacing:3px;
color:#f7d48c;
text-align:center;

}

.info p{
font-size:16px;
opacity:0.8;
color:white;
  font-family: "Myriad Pro Condensed", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* hover */

.card:hover img{
transform:scale(1.15);
}

.card:hover{
box-shadow:0 40px 120px rgba(255,210,120,0.3);
}

/* animation */

@keyframes fade{
from{opacity:0; transform:translateY(-40px)}
to{opacity:1; transform:translateY(0)}
}



/* Booking button */

.booking{
position:fixed;
bottom:60px;
width:100%;
text-align:center;
  font-family: "MyriadPro-Bold", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
font-size:28px;
}

.booking a{
text-decoration:none;
color:#000;
background:#f7d48c;
padding:14px 40px;
border-radius:40px;
font-weight:bold;
letter-spacing:2px;
transition:0.4s;
}

.booking a:hover{
transform:scale(1.1);
box-shadow:0 0 20px rgba(255,215,120,0.7);
}


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

@media (max-width:1024px){

.container{
flex-wrap:wrap;
justify-content:center;
gap:40px;
}

.card{
width:360px;
height:460px;
}

}

/* MOBILE */

@media (max-width:768px){

body{
overflow:auto;
}

/* logo */

.title img{
width:220px;
height:auto;
}

/* subtitle */

.subtitle{
top:120px;
font-size:14px;
}

/* container */

.container{
position:relative;
top:auto;
left:auto;
transform:none;

flex-direction:column;
align-items:center;

padding-top:150px;
padding-bottom:120px;

gap:30px;
}

/* card */

.card{
width:90%;
height:340px;
}

/* text */

.info h1{
font-size:26px;
}

.info p{
font-size:16px;
}

/* booking button */

.booking{
bottom:40px;

}

.booking a{
padding:12px 26px;
}

}

/* SMALL PHONE */

@media (max-width:480px){

.title img{
width:180px;
}

.card{
height:300px;
}

.info h1{
font-size:22px;
}

.info p{
font-size:16px;
}
}