/* =========================================================
FIX HERO FULL ATAS
========================================================= */
html,body{
margin:0!important;
padding:0!important;
overflow-x:hidden!important;
}
#wedding{
margin:0!important;
padding:0!important;
}
.hero{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
margin-top:-70px!important;
padding-top:0!important;
}
.hero img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* =========================================================
FIX FRAME FOTO PENGANTIN
========================================================= */
.people{
display:flex;
flex-direction:column;
gap:40px;
margin-top:40px;
}
.person-box{
padding:30px;
border-radius:38px;
background:
linear-gradient(to bottom,
#E1D5E7,
#EAD7E3,
#F4F0F6);
box-shadow:
0 20px 45px rgba(0,0,0,.12),
inset 0 3px 6px rgba(255,255,255,.95);
overflow:hidden;
}
.flower-frame{
position:relative;
width:100%;
max-width:430px;
aspect-ratio:1/1;
margin:auto;
display:flex;
justify-content:center;
align-items:center;
}
.frame-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:3;
pointer-events:none;
}
.person-photo{
position:relative;
z-index:1;
width:76%;
height:76%;
object-fit:cover;
border-radius:50%;
box-shadow:
0 18px 40px rgba(0,0,0,.18);
}
/* =========================================================
NAMA PENGANTIN
========================================================= */
.person-name{
font-family:'Great Vibes',cursive;
font-size:62px;
margin-top:24px;
text-align:center;
color:#9d7d56;
}
.person-full{
font-size:23px;
font-weight:600;
margin-top:10px;
text-align:center;
color:#5d463b;
}
.person-desc{
margin-top:12px;
font-size:15px;
line-height:1.9;
text-align:center;
color:#5d463b;
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:768px){
.hero{
margin-top:-82px!important;
}
.flower-frame{
max-width:390px;
}
.person-photo{
width:78%;
height:78%;
}
}