@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    background: #fffafa;

    color: #2d1b22;

    font-family: "DM Sans", sans-serif;

    overflow-x: hidden;

}


/* BACKGROUND */

.background-glow {

    position: fixed;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .3;

    pointer-events: none;

    z-index: -1;

}

.glow-1 {

    background: #ffc0d3;

    top: -200px;

    left: -200px;

}

.glow-2 {

    background: #e5c5ff;

    bottom: -200px;

    right: -200px;

}


/* NAVBAR */

.navbar {

    max-width: 1200px;

    margin: auto;

    padding: 24px 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo {

    text-decoration: none;

    color: #2d1b22;

    font-family: "Playfair Display", serif;

    font-size: 22px;

    font-weight: 600;

}

.logo span {

    color: #df5d88;

    font-size: 28px;

}

.back-btn {

    padding: 10px 18px;

    border-radius: 30px;

    background: white;

    border: 1px solid #f0dfe5;

    color: #6e4554;

    text-decoration: none;

    font-size: 12px;

}


/* HERO */

.contact-hero {

    max-width: 760px;

    margin: auto;

    padding: 90px 25px 100px;

    text-align: center;

}

.hero-heart {

    font-size: 55px;

    margin-bottom: 20px;

    animation: heartbeat 1.8s infinite;

}

.mini-title {

    color: #d96790;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

}

.contact-hero h1 {

    margin-top: 15px;

    font-family: "Playfair Display", serif;

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

    line-height: 1.05;

    letter-spacing: -2px;

}

.contact-hero h1 span {

    display: block;

    color: #df5d88;

    font-style: italic;

}

.contact-hero p {

    max-width: 600px;

    margin: 25px auto 0;

    color: #876b75;

    line-height: 1.8;

}


/* COMMON */

.customization-section,
.pricing-section,
.steps-section,
.payment-section,
.contact-section {

    max-width: 1200px;

    margin: auto;

    padding: 80px 30px;

}

.section-heading {

    max-width: 620px;

    margin-bottom: 45px;

}

.section-heading.center {

    margin-left: auto;

    margin-right: auto;

    text-align: center;

}

.section-heading > span {

    color: #d96790;

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 600;

}

.section-heading h2 {

    margin-top: 12px;

    font-family: "Playfair Display", serif;

    font-size: clamp(32px, 5vw, 46px);

    line-height: 1.2;

}

.section-heading p {

    margin-top: 15px;

    color: #8c7079;

    line-height: 1.7;

}


/* CUSTOMIZATION */

.custom-grid {

    display: grid;

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

    gap: 20px;

}

.custom-card {

    padding: 30px;

    border-radius: 22px;

    background: white;

    border: 1px solid #f1e3e7;

    transition: .3s;

}

.custom-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 50px rgba(90, 30, 50, .08);

}

.custom-icon {

    font-size: 32px;

}

.custom-card h3 {

    margin-top: 18px;

    font-family: "Playfair Display", serif;

    font-size: 23px;

}

.custom-card p {

    margin-top: 10px;

    color: #8b6f79;

    font-size: 13px;

    line-height: 1.8;

}


/* PRICING */

.price-grid {

    display: grid;

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

    gap: 25px;

}

.price-card {

    position: relative;

    padding: 40px 25px;

    border-radius: 25px;

    text-align: center;

    background: white;

    border: 1px solid #f1e2e7;

    transition: .3s;

}

.price-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 25px 60px rgba(100, 30, 50, .1);

}

.price-card.popular {

    background: linear-gradient(135deg, #431729, #7d2546);

    color: white;

    transform: scale(1.04);

}

.price-icon {

    font-size: 42px;

}

.price-card h3 {

    margin-top: 15px;

    font-family: "Playfair Display", serif;

    font-size: 28px;

}

.price-card p {

    margin-top: 8px;

    color: #8c6e78;

    font-size: 13px;

}

.price-card.popular p {

    color: #e3bdca;

}

.price-card strong {

    display: block;

    margin-top: 22px;

    color: #d9517e;

    font-family: "Playfair Display", serif;

    font-size: 42px;

}

.price-card.popular strong {

    color: #ffb0c9;

}

.popular-tag {

    position: absolute;

    top: -12px;

    left: 50%;

    transform: translateX(-50%);

    padding: 7px 14px;

    border-radius: 20px;

    background: #f19bb8;

    color: #52172e;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;

}

.custom-price-note {

    max-width: 600px;

    margin: 35px auto 0;

    text-align: center;

    color: #9a7180;

    font-size: 13px;

    line-height: 1.8;

}


/* STEPS */

.steps {

    display: grid;

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

    gap: 20px;

}

.step {

    padding: 20px;

}

.step span {

    color: #e06891;

    font-size: 12px;

    letter-spacing: 2px;

}

.step h3 {

    margin-top: 15px;

    font-family: "Playfair Display", serif;

    font-size: 22px;

}

.step p {

    margin-top: 10px;

    color: #8b7079;

    font-size: 13px;

    line-height: 1.7;

}


/* PAYMENT */

.payment-box {

    padding: 50px;

    border-radius: 32px;

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 50px;

    align-items: center;

    background:

        radial-gradient(circle at 20% 20%, rgba(255,255,255,.1), transparent 30%),

        linear-gradient(135deg, #351322, #752442);

    color: white;

}

.payment-content h2 {

    margin-top: 12px;

    font-family: "Playfair Display", serif;

    font-size: 42px;

}

.payment-content p {

    max-width: 550px;

    margin-top: 15px;

    color: #dfbdc8;

    font-size: 14px;

    line-height: 1.8;

}

.payment-note {

    color: #f0c7d4 !important;

}

.contact-number {

    display: inline-block;

    margin-top: 25px;

    padding: 12px 18px;

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

    border-radius: 30px;

    color: white;

    font-size: 14px;

}

.qr-box {

    width: 210px;

    padding: 15px;

    border-radius: 22px;

    background: white;

    text-align: center;

}

.qr-box img {

    width: 100%;

    display: block;

    border-radius: 12px;

}

.qr-box span {

    display: block;

    margin-top: 10px;

    color: #653046;

    font-size: 11px;

}


/* CONTACT */

.contact-box {

    padding: 55px;

    border-radius: 30px;

    display: grid;

    grid-template-columns: 1fr 300px;

    gap: 50px;

    align-items: center;

    background: white;

    border: 1px solid #f0e0e5;

}

.contact-left h2 {

    margin-top: 12px;

    font-family: "Playfair Display", serif;

    font-size: 42px;

}

.contact-left > p {

    max-width: 600px;

    margin-top: 15px;

    color: #876b75;

    font-size: 14px;

    line-height: 1.8;

}

.contact-links {

    margin-top: 28px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}

.contact-links a {

    padding: 12px 17px;

    border-radius: 30px;

    background: #fff5f7;

    color: #b34870;

    text-decoration: none;

    font-size: 12px;

}

.love-note {

    padding: 35px 25px;

    border-radius: 25px;

    text-align: center;

    background: linear-gradient(135deg, #fce7ee, #f7dce7);

}

.love-note > span {

    font-size: 42px;

}

.love-note p {

    margin-top: 18px;

    color: #744257;

    font-family: "Playfair Display", serif;

    font-size: 23px;

    line-height: 1.5;

}

.love-note small {

    display: block;

    margin-top: 20px;

    color: #a47383;

    font-size: 11px;

}


/* FOOTER */

footer {

    padding: 60px 25px;

    border-top: 1px solid #f0e3e7;

    text-align: center;

}

.footer-logo {

    font-family: "Playfair Display", serif;

    font-size: 23px;

}

footer p {

    margin-top: 12px;

    color: #967884;

    font-size: 12px;

}

footer a {

    display: inline-block;

    margin-top: 20px;

    color: #c7567d;

    font-size: 12px;

    text-decoration: none;

}


/* ANIMATION */

@keyframes heartbeat {

    0%,
    100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.15);

    }

}


/* MOBILE */

@media (max-width: 900px) {

    .custom-grid {

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

    }

    .steps {

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

    }

    .payment-box {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .qr-box {

        margin: auto;

    }

    .contact-box {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 650px) {

    .navbar {

        padding: 20px;

    }

    .back-btn {

        font-size: 10px;

        padding: 9px 12px;

    }

    .logo {

        font-size: 18px;

    }

    .contact-hero {

        padding: 60px 20px 70px;

    }

    .customization-section,
    .pricing-section,
    .steps-section,
    .payment-section,
    .contact-section {

        padding: 60px 20px;

    }

    .custom-grid,
    .price-grid,
    .steps {

        grid-template-columns: 1fr;

    }

    .price-card.popular {

        transform: none;

    }

    .payment-box {

        padding: 35px 20px;

    }

    .payment-content h2,
    .contact-left h2 {

        font-size: 34px;

    }

    .contact-box {

        padding: 35px 22px;

        gap: 35px;

    }

    .qr-box {

        width: 190px;

    }

}