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

html{
scroll-behavior:smooth;
}

body{

background:#0b0b0b;

color:white;

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

overflow-x:hidden;
}

/* NAVBAR */

.navbar{

position:fixed;

top:0;
left:0;

width:100%;

padding:24px 8%;

display:flex;
justify-content:space-between;
align-items:center;

z-index:999;

background:rgba(0,0,0,.45);

backdrop-filter:blur(10px);

border-bottom:1px solid rgba(255,255,255,.05);
}

.logo{

font-size:34px;

font-family:'Cormorant Garamond',serif;

letter-spacing:5px;

color:#d8c3a5;
}

.menu{

display:flex;

gap:40px;

list-style:none;
}

.menu a{

text-decoration:none;

color:white;

font-size:15px;

transition:.3s;
}

.menu a:hover{

color:#d8c3a5;
}

.nav-btn{

padding:12px 26px;

border:1px solid #d8c3a5;

border-radius:50px;

text-decoration:none;

color:#d8c3a5;

transition:.4s;
}

.nav-btn:hover{

background:#d8c3a5;

color:black;
}

/* HERO */

.hero{

height:100vh;

padding:120px 8% 0;

display:flex;
align-items:center;

background:
linear-gradient(rgba(0,0,0,.55),
rgba(0,0,0,.75)),

url('images/papan-ucapan-selamat-manado.jpg');

background-size:cover;
background-position:center;

position:relative;
}

.overlay{

position:absolute;

width:100%;
height:100%;

background:rgba(0,0,0,.2);
}

.hero-content{

position:relative;

z-index:2;

max-width:760px;

animation:fadeUp 1.2s ease;
}

.mini-text{

font-size:13px;

letter-spacing:6px;

color:#d8c3a5;

margin-bottom:25px;
}

.hero h1{

font-size:92px;

line-height:.95;

font-family:'Cormorant Garamond',serif;

margin-bottom:30px;
}

.hero-desc{

font-size:18px;

line-height:1.9;

max-width:550px;

color:#ddd;

margin-bottom:40px;
}

.hero-buttons{

display:flex;

gap:20px;
}

.btn-primary{

padding:17px 38px;

background:#d8c3a5;

border-radius:50px;

text-decoration:none;

color:black;

font-weight:600;

transition:.4s;
}

.btn-secondary{

padding:17px 38px;

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

border-radius:50px;

text-decoration:none;

color:white;

transition:.4s;
}

.btn-primary:hover,
.btn-secondary:hover{

transform:translateY(-5px);
}

/* ABOUT */

.about{

padding:140px 8%;

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;
}

.about-image{

overflow:hidden;

border-radius:14px;
}

.about-image img{

width:100%;

height:720px;

object-fit:cover;

transition:1s;
}

.about-image:hover img{

transform:scale(1.05);
}

.section-mini{

font-size:13px;

letter-spacing:6px;

color:#d8c3a5;

margin-bottom:25px;
}

.about-text h2{

font-size:82px;

line-height:1;

font-family:'Cormorant Garamond',serif;

margin-bottom:35px;
}

.about-text p{

font-size:17px;

line-height:2;

color:#ccc;
}

/* PRODUCTS */

.products{

padding:100px 8%;
}

.section-head{

margin-bottom:60px;
}

.section-head p{

font-size:13px;

letter-spacing:6px;

color:#d8c3a5;

margin-bottom:20px;
}

.section-head h2{

font-size:72px;

font-family:'Cormorant Garamond',serif;
}

.product-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:35px;
}

.product{

position:relative;

overflow:hidden;

border-radius:14px;
}

.product img{

width:100%;

height:650px;

object-fit:cover;

transition:1.2s;
}

.product:hover img{

transform:scale(1.08);
}

.product::after{

content:"";

position:absolute;

left:0;
bottom:0;

width:100%;
height:50%;

background:linear-gradient(transparent,
rgba(0,0,0,.75));
}

.product-info{

position:absolute;

left:35px;
bottom:35px;

z-index:2;
}

.product-info h3{

font-size:42px;

font-family:'Cormorant Garamond',serif;

margin-bottom:8px;
}

.product-info p{

color:#d8c3a5;
}

/* CTA */

.cta{

padding:180px 8%;

text-align:center;
}

.cta h2{

font-size:90px;

font-family:'Cormorant Garamond',serif;

margin-bottom:20px;
}

.cta p{

color:#bbb;

margin-bottom:40px;
}

.cta a{

display:inline-block;

padding:18px 40px;

background:#d8c3a5;

border-radius:50px;

text-decoration:none;

color:black;

font-weight:600;

transition:.4s;
}

.cta a:hover{

transform:translateY(-5px);
}

/* FLOATING WA */

.floating-wa{

position:fixed;
right:25px;
bottom:25px;

display:flex;
align-items:center;
gap:12px;

background:#25D366;
color:white;

padding:14px 22px;
border-radius:60px;

text-decoration:none;
font-weight:600;
font-size:15px;

z-index:9999;

box-shadow:0 10px 30px rgba(37,211,102,0.35);

transition:0.4s ease;

animation:float 2.5s infinite;

}
.floating-wa img{

width:24px;
height:24px;

object-fit:contain;

}
/* ANIMATION */

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0);
}

}

/* MOBILE */

@media(max-width:768px){

.menu{
display:none;
}

.hero{

justify-content:center;

text-align:center;
}

.hero h1{

font-size:56px;
}

.hero-desc{

font-size:16px;
}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;
}

.about{

grid-template-columns:1fr;

gap:60px;
}

.about-image img{

height:450px;
}

.about-text h2{

font-size:52px;
}

.section-head h2{

font-size:52px;
}

.product-grid{

grid-template-columns:1fr;
}

.product img{

height:450px;
}

.cta h2{

font-size:58px;
}

}

/* FAQ */

.faq{

padding:120px 8%;

max-width:1000px;

margin:auto;
}

.faq h2{

font-size:60px;

margin-bottom:50px;

text-align:center;
}

.faq-item{

padding:30px 0;

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

.faq-item h3{

font-size:24px;

margin-bottom:15px;

color:#d8c3a5;
}

.faq-item p{

line-height:1.8;

color:#ccc;
}