:root {

    --primary: #e84d78;
    --primary-dark: #c92f5c;
    --dark: #201b22;
    --muted: #716a72;
    --light-bg: #fff8fa;
    --soft-pink: #fff0f4;
    --border: #f0dfe5;

}


* {

    scroll-behavior: smooth;

}


body {

    font-family: "DM Sans", sans-serif;
    color: var(--dark);
    background: #ffffff;
    overflow-x: hidden;
    padding-top:65px ;

}


h1,
h2,
h3,
h4,
h5 {

    font-family: "Playfair Display", serif;

}


p {

    color: var(--muted);
    line-height: 1.8;

}


/* ================= NAVBAR ================= */

.navbar {

    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid #f5e8ec;

}


.navbar-brand {

    font-size: 1.7rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -.5px;

}


.navbar-brand span {

    color: var(--dark);

}


.nav-link {

    color: var(--dark);
    font-weight: 500;
    margin: 0 8px;

}


.nav-link:hover {

    color: var(--primary);

}


/* ================= BUTTONS ================= */

.btn-primary-custom {

    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    padding: 13px 26px;
    border-radius: 50px;
    font-weight: 600;
    transition: all .3s ease;

}


.btn-primary-custom:hover {

    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
    transform: translateY(-2px);

}


.btn-outline-custom {

    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 600;
    transition: all .3s ease;

}


.btn-outline-custom:hover {

    background: var(--primary);
    color: #fff;

}


/* ================= HERO ================= */

.hero-section {

    min-height: 760px;
    padding-top: 130px;
    padding-bottom: 90px;

    background:

        linear-gradient(90deg,
            rgba(255, 248, 250, .97) 0%,
            rgba(255, 248, 250, .90) 48%,
            rgba(255, 248, 250, .25) 100%),

        url("https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=2000&q=85");

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

}


.hero-content {

    max-width: 650px;

}


.eyebrow {

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    border-radius: 50px;
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

}


.hero-title {

    font-size: clamp(3rem, 6vw, 5.8rem);
    line-height: 1.05;
    margin-top: 25px;
    margin-bottom: 25px;
    letter-spacing: -2px;

}


.hero-title span {

    color: var(--primary);

}


.hero-description {

    font-size: 1.15rem;
    max-width: 570px;

}


.hero-buttons {

    margin-top: 32px;

}


.trust-line {

    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 28px;
    font-size: .9rem;
    color: var(--muted);

}


.trust-line i {

    color: var(--primary);
    margin-right: 5px;

}


.floating-card {

    position: absolute;
    background: #ffffff;
    border-radius: 18px;
    padding: 16px 20px;
    box-shadow: 0 15px 40px rgba(50, 25, 35, .12);

}


.floating-card-one {

    bottom: 110px;
    right: 13%;

}


.floating-card-two {

    top: 190px;
    right: 5%;

}


.floating-card img {

    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 50%;

}


/* ================= GENERAL ================= */

.section-padding {

    padding: 100px 0;

}


.section-heading {

    max-width: 720px;
    margin: 0 auto 60px;
    text-align: center;

}


.section-heading h2 {

    font-size: clamp(2.3rem, 4vw, 4rem);
    margin-top: 15px;
    margin-bottom: 18px;

}


.section-heading p {

    font-size: 1.05rem;

}


.soft-section {

    background: var(--light-bg);

}


/* ================= FEATURE CARDS ================= */

.feature-card {

    height: 100%;
    padding: 35px 30px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #fff;
    transition: all .3s ease;

}


.feature-card:hover {

    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(60, 20, 35, .08);

}


.feature-icon {

    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--soft-pink);
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 22px;

}


.feature-card h3 {

    font-size: 1.55rem;
    margin-bottom: 15px;

}


/* ================= STEPS ================= */

.step-number {

    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 22px;

}


.step-card {

    position: relative;
    height: 100%;
    padding: 30px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--border);

}


/* ================= IMAGE STORY ================= */

.image-story-section {

    background: #ffffff;

}

.image-story-card {

    position: relative;
    overflow: hidden;
    border-radius: 24px;
   

}


.image-story-card img {

   width: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;

}


.image-story-card:hover img {

    transform: scale(1.07);

}




.image-story-overlay {

    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;

    background:

        linear-gradient(to top,
            rgba(20, 15, 20, .82),
            rgba(20, 15, 20, .05));

    color: #fff;

}


.image-story-overlay p {

    font-size: 1.3rem;
    margin-bottom: 8px;

}


.image-story-overlay p {

    color: rgba(255, 255, 255, .82);
    margin-bottom: 0;

}


/* ================= PROFILE CARDS ================= */

.profile-card {

    border: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 35px rgba(50, 20, 35, .08);
    transition: all .3s ease;

}


.profile-card:hover {

    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(50, 20, 35, .13);

}


.profile-image {

   
    width: 100%;
    object-fit: cover;

}


.profile-content {

    padding: 22px;

}


.profile-content .sk {

    font-size: 1.3rem;
    margin-bottom: 5px;

}


.profile-location {

    color: var(--muted);
    font-size: .9rem;

}


.profile-tags {

    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 15px;

}


.profile-tag {

    padding: 6px 11px;
    border-radius: 50px;
    background: var(--soft-pink);
    color: var(--primary-dark);
    font-size: .75rem;
    font-weight: 600;

}


/* ================= VISUAL MOMENTS ================= */

.visual-moments-section {

    background: var(--light-bg);

}


.visual-moment {

    position: relative;
    
    overflow: hidden;
    border-radius: 22px;

}


.visual-moment img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;

}


.visual-moment:hover img {

    transform: scale(1.08);

}


.visual-moment-content {

    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);

}


.visual-moment-content h4 {

    margin-bottom: 5px;
    font-size: 1.35rem;

}


.visual-moment-content p {

    margin: 0;
    font-size: .9rem;

}


/* ================= IMAGE COLLAGE ================= */

.image-collage {

    position: relative;
    min-height: 600px;

}


.collage-main {

    width: 75%;
    height: 510px;
    object-fit: cover;
    border-radius: 25px;

}


.collage-small {

    position: absolute;
    width: 42%;
    height: 260px;
    object-fit: cover;
    border-radius: 22px;
    border: 8px solid #fff;
    box-shadow: 0 15px 40px rgba(30, 15, 25, .15);

}


.collage-small-one {

    right: 0;
    top: 40px;

}


.collage-small-two {

    right: 5%;
    bottom: 20px;

}


/* ================= STORY ================= */

.story-section {

    background: var(--soft-pink);

}


.story-image {

    width: 100%;
    
    object-fit: cover;
    border-radius: 25px;

}


.story-content {

    padding: 25px 25px 25px 45px;

}


.story-content h2 {

    font-size: clamp(2.3rem, 4vw, 4rem);
    margin: 18px 0;

}


.benefit-list {

    list-style: none;
    padding: 0;
    margin: 30px 0;

}


.benefit-list li {

    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 17px;
    color: var(--dark);

}


.benefit-list i {

    color: var(--primary);
    font-size: 1.2rem;
    margin-top: 2px;

}


/* ================= TESTIMONIALS ================= */

.testimonial-card {

    height: 100%;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #fff;

}


.testimonial-stars {

    color: #f4a623;
    letter-spacing: 3px;
    margin-bottom: 18px;

}


.testimonial-user {

    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 25px;

}


.testimonial-user img {

    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 50%;

}


.testimonial-user h5 {

    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 1rem;
    font-weight: 700;

}


.testimonial-user small {

    color: var(--muted);

}


/* ================= REGISTRATION ================= */

.registration-box {

    max-width: 700px;
    margin: auto;
    padding: 40px;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(60, 20, 35, .12);

}


.registration-step {

    display: none;

}


.registration-step.active {

    display: block;

}


.progress {

    height: 7px;
    border-radius: 20px;
    background: #f4e5e9;

}


.progress-bar {

    background: var(--primary);

}


.form-control,
.form-select {

    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #eadce1;

}


.form-control:focus,
.form-select:focus {

    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(232, 77, 120, .12);

}


.choice-card {

    cursor: pointer;
    border: 1px solid #eadce1;
    padding: 20px;
    border-radius: 15px;
    transition: all .25s ease;

}


.choice-card:hover,
.choice-card.selected {

    border-color: var(--primary);
    background: var(--soft-pink);

}


.choice-card input {

    display: none;

}


/* ================= FULL WIDTH BANNER ================= */

.full-width-banner {

    position: relative;
    overflow: hidden;

}


.full-width-banner>img {

    width: 100%;
    height: 520px;
    object-fit: cover;

}


.banner-overlay {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    background:

        linear-gradient(90deg,
            rgba(25, 17, 22, .82),
            rgba(25, 17, 22, .25));

}


/* ================= CTA ================= */

.cta-section {

    padding: 100px 0;

    background:

        linear-gradient(90deg,
            rgba(38, 24, 31, .93),
            rgba(38, 24, 31, .65)),

        url("../image/xflirtbg2.webp");

    background-size: cover;
    background-position: center;
    color: #fff;

}


.cta-section p {

    color: rgba(255, 255, 255, .78);

}


.cta-section h2 {

    font-size: clamp(2.4rem, 5vw, 4.5rem);

}


/* ================= FAQ ================= */

.faq-item {

    border: 1px solid var(--border);
    border-radius: 15px;
    margin-bottom: 15px;
    overflow: hidden;
    background: #fff;

}


.accordion-button {

    padding: 22px 25px;
    font-weight: 600;
    color: var(--dark);
    background: #fff;
    box-shadow: none !important;

}


.accordion-button:not(.collapsed) {

    color: var(--primary);
    background: var(--soft-pink);

}


.accordion-body {

    padding: 0 25px 25px;
    color: var(--muted);
    line-height: 1.8;

}


/* ================= FOOTER ================= */

footer {

    background: #211b20;
    color: #fff;
    padding: 65px 0 25px;

}


footer p,
footer a {

    color: rgba(255, 255, 255, .65);

}


footer a {

    text-decoration: none;

}


footer a:hover {

    color: #fff;

}


.footer-title {

    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    margin-bottom: 20px;

}


.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 22px;
    margin-top: 45px;

}


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

@media (max-width: 991px) {

    .hero-section {

        background-position: 65% center;

    }


    .floating-card {

        display: none;

    }


    .story-content {

        padding: 35px 0 0;

    }


    .story-image {

        height: 450px;

    }

}


@media (max-width: 767px) {

    .hero-section {

        min-height: auto;
        padding-top: 115px;
        padding-bottom: 70px;

        background:

            linear-gradient(180deg,
                rgba(255, 248, 250, .95),
                rgba(255, 248, 250, .88)),

            url("https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=1200&q=85");

        background-size: cover;

    }


    .hero-title {

        font-size: 3rem;

    }


    .hero-buttons .btn {

        width: 100%;
        margin-bottom: 10px;

    }


    .section-padding {

        padding: 70px 0;

    }


    .registration-box {

        padding: 25px 20px;

    }


    .image-story-card {

        height: 350px;

    }


    .visual-moment {

        height: 320px;

    }


    .image-collage {

        min-height: auto;
        padding-bottom: 30px;

    }


    .collage-main {

        width: 100%;
        height: 400px;

    }


    .collage-small {

        position: relative;
        width: auto;
        height: auto;
        margin-top: -70px;
        display: flex;
        text-align: center;
        justify-content: center;

    }


    .collage-small-one {

       
        margin-left: 3%;

    }


    .collage-small-two {

        right: auto;
        margin-left: 1%;
         margin-top: 90px;


    }


    .full-width-banner>img {

        height: 650px;

    }

}