*{box-sizing:border-box;margin:0;padding:0}
:root{--cream:#f5efe4;--paper:#fbf8f2;--brown:#2c211b;--brown2:#594238;--gold:#b08a4b;--line:#d8cbb8}
html{scroll-behavior:smooth}
body{font-family:Montserrat,Arial,sans-serif;color:var(--brown);background:var(--paper);line-height:1.7}
.container{width:min(1120px,90%);margin:auto}
.header{position:fixed;top:0;left:0;width:100%;z-index:20;background:rgba(251,248,242,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(176,138,75,.2)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--brown);font-family:"Cormorant Garamond",serif;font-size:25px;font-weight:700;line-height:.8}
.brand small{display:block;font:500 9px Montserrat,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:8px}
.brand-mark{display:grid;place-items:center;width:39px;height:39px;border:1px solid var(--gold);border-radius:50%;font-size:22px}
nav{display:flex;gap:30px}nav a{color:var(--brown);text-decoration:none;font-size:12px;text-transform:uppercase;letter-spacing:1.4px}nav a:hover{color:var(--gold)}
.menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--brown)}
.hero{min-height:760px;display:flex;align-items:center;position:relative;background:linear-gradient(90deg,rgba(30,20,14,.78),rgba(30,20,14,.35)),url("https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=1800&q=85") center/cover}
.hero-content{position:relative;color:#fff;padding-top:65px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--gold);font-weight:600;margin-bottom:15px}.hero .eyebrow{color:#e4c891}
h1,h2,h3{font-family:"Cormorant Garamond",serif;line-height:1.05}h1{font-size:clamp(52px,7vw,88px);font-weight:600}h1 em{font-weight:500}.hero-text{max-width:600px;margin:25px 0 32px;font-size:16px;color:#eee}
.actions{display:flex;gap:13px;flex-wrap:wrap}.btn{display:inline-block;padding:13px 24px;text-decoration:none;text-transform:uppercase;letter-spacing:1.5px;font-size:11px;font-weight:600}.btn-primary{background:var(--gold);color:#fff;border:1px solid var(--gold)}.btn-outline{border:1px solid rgba(255,255,255,.65);color:#fff}.btn:hover{transform:translateY(-2px)}
.section{padding:105px 0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.about h2,.section-heading h2,.contact h2{font-size:54px;font-weight:600;margin-bottom:20px}.about p:not(.eyebrow):not(.signature){color:#66584e;margin-bottom:15px}.signature{font-family:"Cormorant Garamond",serif;font-size:27px;color:var(--gold);font-style:italic;margin-top:25px}
.quote-card{background:var(--cream);padding:55px;min-height:290px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line)}.quote-card span{font:700 80px "Cormorant Garamond";color:var(--gold);height:55px}.quote-card p{font:600 28px "Cormorant Garamond";line-height:1.3}
.menu-section{background:var(--cream)}.section-heading{text-align:center;max-width:650px;margin:0 auto 55px}.section-heading h2{margin-bottom:12px}.section-heading>p:last-child{color:#74675d}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.menu-card{padding:38px 32px;background:var(--paper);border:1px solid var(--line);position:relative}.menu-card.featured{background:var(--brown);color:#fff;transform:translateY(-10px)}.number{font-size:11px;color:var(--gold);letter-spacing:2px;margin-bottom:25px}.menu-card h3{font-size:33px;margin-bottom:12px}.menu-card p{min-height:95px;color:#74675d;font-size:14px}.featured p{color:#ddd3c8}.menu-card strong{display:block;margin:22px 0;color:var(--gold);font-size:13px}.menu-card a{color:inherit;text-decoration:none;font-size:11px;text-transform:uppercase;letter-spacing:1.5px}
.gallery-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:220px 220px;gap:12px}.gallery-item{position:relative;background-size:cover;background-position:center;display:flex;align-items:end;overflow:hidden}.gallery-item span{position:relative;width:100%;padding:16px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));font:600 20px "Cormorant Garamond"}.photo-one{grid-row:span 2;background-image:url("image/dalembox-bawah.jpg")}.photo-two{background-image:url("image/aqiqah-bayi.jpg")}.photo-three{background-image:url("image/aqiqah-sertifikat.jpg")}.photo-four{grid-column:2/4;background-image:url("image/dalembox-atas.jpg")}.gallery-note{text-align:center;color:#8a7c70;font-size:11px;margin-top:16px}
.why{background:var(--cream)}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.features div{padding:25px 20px;border-top:1px solid var(--gold)}.features b{color:var(--gold);font:600 13px Montserrat}.features h3{font-size:25px;margin:15px 0 8px}.features p{font-size:13px;color:#74675d}
.contact{padding-top:70px}.contact-box{background:var(--brown);color:#fff;padding:65px;display:grid;grid-template-columns:1.2fr .8fr;gap:60px}.contact h2{font-size:50px}.contact-box>div:first-child p:last-child{color:#d9cec3;max-width:600px}.contact-details{border-left:1px solid rgba(255,255,255,.2);padding-left:40px}.contact-details p{margin-bottom:20px}.contact-details span{display:block;color:#b9a99b;font-size:10px;text-transform:uppercase;letter-spacing:2px}.contact-details strong{font-size:14px}.contact-details .btn{margin-top:10px}
footer{background:#211813;color:#bcaea2;padding:30px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between}.footer-inner .brand{color:#fff}.footer-inner p{font-size:10px}
@media(max-width:800px){.menu-toggle{display:block}nav{display:none;position:absolute;top:78px;left:0;width:100%;background:var(--paper);padding:20px 5%;flex-direction:column;gap:16px;border-bottom:1px solid var(--line)}nav.open{display:flex}.hero{min-height:680px}.two-col,.contact-box{grid-template-columns:1fr;gap:40px}.menu-grid{grid-template-columns:1fr}.menu-card.featured{transform:none}.features{grid-template-columns:1fr 1fr}.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:220px 220px}.photo-one{grid-row:auto}.photo-four{grid-column:auto}.contact-box{padding:40px 28px}.contact-details{border-left:0;border-top:1px solid rgba(255,255,255,.2);padding:30px 0 0}.about h2,.section-heading h2,.contact h2{font-size:43px}.footer-inner{flex-direction:column;gap:18px;text-align:center}}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {

    --cream: #f5efe4;
    --paper: #fbf8f2;
    --brown: #2c211b;
    --brown-light: #594238;
    --gold: #b08a4b;
    --line: #d8cbb8;

}


body {

    background: var(--paper);

    color: var(--brown);

    font-family: "Montserrat", sans-serif;

    line-height: 1.7;

}


header {

    height: 78px;

    display: flex;

    align-items: center;

    padding: 0 6%;

    background: rgba(251,248,242,.96);

    border-bottom: 1px solid var(--line);

}


.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    font-family: "Cormorant Garamond", serif;

    font-size: 24px;

    font-weight: 700;

}


.logo span {

    width: 40px;

    height: 40px;

    border: 1px solid var(--gold);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--gold);

}


.logo small {

    display: block;

    font-family: "Montserrat", sans-serif;

    font-size: 8px;

    letter-spacing: 3px;

    color: var(--gold);

}


.hero-home {

    min-height: 650px;

    display: flex;

    align-items: center;

    background:

        linear-gradient(
            90deg,
            rgba(35,25,18,.82),
            rgba(35,25,18,.38)
        ),

        url("https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=1800&q=85")

        center / cover;

}


.hero-content {

    width: min(800px, 88%);

    margin: auto;

    color: white;

}


.eyebrow {

    color: var(--gold);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

    margin-bottom: 15px;

}


.hero-content .eyebrow {

    color: #e4c891;

}


.hero-content h1,
.aqiqah-header h1 {

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(50px, 8vw, 85px);

    line-height: 1;

    font-weight: 600;

}


.hero-content h1 em,
.aqiqah-header h1 em {

    display: block;

    font-weight: 500;

}


.hero-content p:last-child {

    max-width: 580px;

    margin-top: 25px;

    color: #eee;

}


.services,
.aqiqah-packages {

    padding: 100px 5%;

    background: var(--cream);

}


.section-title {

    text-align: center;

    max-width: 650px;

    margin: auto auto 55px;

}


.section-title h2 {

    font-family: "Cormorant Garamond", serif;

    font-size: 55px;

    line-height: 1;

    margin-bottom: 15px;

}


.section-title p:last-child {

    color: #75685d;

}


.service-container {

    max-width: 1050px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

}


.service-card {

    min-height: 390px;

    padding: 45px;

    text-decoration: none;

    color: white;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    overflow: hidden;

    transition: .35s;

}


.service-card:hover {

    transform: translateY(-8px);

}


.service-card.aqiqah {

    background:

        linear-gradient(
            0deg,
            rgba(40,27,19,.95),
            rgba(40,27,19,.25)
        ),

        url("https://images.unsplash.com/photo-1555939594-58d7cb561ad1?auto=format&fit=crop&w=1000&q=85")

        center / cover;

}


.service-card.acara {

    background:

        linear-gradient(
            0deg,
            rgba(40,27,19,.95),
            rgba(40,27,19,.25)
        ),

        url("https://images.unsplash.com/photo-1555244162-803834f70033?auto=format&fit=crop&w=1000&q=85")

        center / cover;

}


.service-number {

    position: absolute;

    top: 25px;

    right: 30px;

    color: #e0c28a;

    font-size: 11px;

    letter-spacing: 2px;

}


.service-icon {

    color: #d5b36f;

    font-size: 25px;

    margin-bottom: 10px;

}


.service-card h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 45px;

    line-height: 1;

}


.service-card p {

    max-width: 450px;

    margin: 15px 0;

    color: #eee;

    font-size: 13px;

}


.service-button {

    color: #e0c28a;

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;

}


footer {

    background: #211813;

    color: #c9b9ab;

    text-align: center;

    padding: 40px 20px;

}


footer div {

    color: white;

    font-family: "Cormorant Garamond", serif;

    font-size: 24px;

}


footer p {

    font-size: 10px;

    letter-spacing: 2px;

    margin: 8px 0;

}


/* =========================
   HALAMAN AQIQAH
========================= */


.aqiqah-header {

    padding: 100px 7%;

    background: var(--paper);

}


.aqiqah-header > div {

    max-width: 900px;

    margin: auto;

}


.back-button {

    display: inline-block;

    margin-bottom: 45px;

    color: var(--brown);

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 1px;

}


.aqiqah-header h1 {

    font-size: 65px;

}


.aqiqah-header > div > p:last-child {

    max-width: 600px;

    color: #75685d;

    margin-top: 20px;

}


.package-container {

    max-width: 1100px;

    margin: auto;

    display: grid;

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

    gap: 22px;

}


.package-card {

    background: var(--paper);

    border: 1px solid var(--line);

    padding: 40px 30px;

    transition: .3s;

}


.package-card:hover {

    transform: translateY(-7px);

}


.package-number {

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 3px;

}


.package-card h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 35px;

    margin: 20px 0 10px;

}


.package-card p {

    color: #75685d;

    font-size: 13px;

}


.line {

    width: 45px;

    height: 1px;

    background: var(--gold);

    margin: 25px 0;

}


.package-card ul {

    list-style: none;

}


.package-card li {

    color: #65574d;

    font-size: 12px;

    margin: 12px 0;

}


.package-card strong {

    display: block;

    color: var(--gold);

    font-size: 12px;

    margin: 25px 0 18px;

}


.package-card a {

    color: var(--brown);

    text-decoration: none;

    text-transform: uppercase;

    font-size: 9px;

    letter-spacing: 1.5px;

}


.featured {

    background: var(--brown);

    color: white;

    transform: translateY(-10px);

}


.featured:hover {

    transform: translateY(-17px);

}


.featured p,
.featured li {

    color: #ddd3c8;

}


.featured a {

    color: white;

}


.popular {

    display: block;

    width: max-content;

    margin-top: 15px;

    padding: 5px 9px;

    border: 1px solid var(--gold);

    color: #d9b975;

    font-size: 8px;

    letter-spacing: 2px;

}


.aqiqah-contact {

    padding: 90px 20px;

    text-align: center;

    background: var(--brown);

    color: white;

}


.aqiqah-contact h2 {

    font-family: "Cormorant Garamond", serif;

    font-size: 50px;

}


.aqiqah-contact p:not(.eyebrow) {

    color: #d5c9bd;

    max-width: 550px;

    margin: 15px auto 25px;

}


.whatsapp {

    display: inline-block;

    background: var(--gold);

    color: white;

    text-decoration: none;

    padding: 13px 24px;

    font-size: 10px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* HP */

@media(max-width:800px) {

    .service-container,
    .package-container {

        grid-template-columns: 1fr;

    }


    .service-card {

        min-height: 340px;

        padding: 30px;

    }


    .featured {

        transform: none;

    }


    .featured:hover {

        transform: translateY(-7px);

    }


    .aqiqah-header h1 {

        font-size: 50px;

    }


    .section-title h2 {

        font-size: 45px;

    }

}