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

body {
    font-family: 'Inter', Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
}

/* Header Styling */
.headerdiv {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 20000 !important;
}

/* NEW INNER WRAPPER */
.inner {
    max-width: 1350px;
    margin: 0 auto;
    padding: 10px 20px;

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

.crtlogo {
    height: 60px;
}

.navlinks {
    display: flex;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.navlinks a {
    text-decoration: none;
    /* remove underline */
    color: #000;
    /* black text */
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s;
}

.navlinks a:hover {
    color: #689f38;
    /* your green hover */
}

.navlinks a.active {
    color: #4CAF50;
    font-weight: bold;
    border-bottom: 2px solid #4CAF50;
}

/*nav bar button */
.navlinks button {
    background: #689f38;
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
    display: inline-block;
}

/* nav bar Button hover */
.navlinks button:hover {
    background: #558b2f;
}

/* Global Green Button */
.btn-green {
    background: #689f38 !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(104, 159, 56, 0.2);
}

.btn-green:hover {
    background: #558b2f !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(104, 159, 56, 0.3);
    color: #fff !important;
}

/* ============================= */
/* Banner Background Iamge Section */
/* ============================= */
.hero-section {
    position: relative;
    /* Essential for positioning the form inside */
    width: 100%;
    height: 160vh;
    padding-top: 0px;
    /* Space for the fixed header */
}

.hero-section {
    position: relative;
    width: 100%;
    height: 160vh;
    background-image: url(../image/WhatsApp\ Image\ 2026-03-03\ at\ 10.45.50\ PM.jpeg);
    /* rename image properly */
    background-size: cover;
    background-position: center top;
    /* IMPORTANT */
    background-repeat: no-repeat;
}

/* ============================= */
/* Banner Register from*/
/* ============================= */
/* Hero Section */
.hero-section {
    position: relative;
    min-height: 100vh;
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 100px 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 70%);
    z-index: 1;
}

.hero-text-container {
    position: relative;
    margin-left: 80px;
    max-width: 550px;
    z-index: 2;
    color: white;
}

.hero-text-container h1 {
    font-size: 54px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-text-container h1 span {
    color: #5aab2a;
}

.hero-text-container p {
    font-size: 19px;
    line-height: 1.6;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    opacity: 0.95;
}

/* Background Image */
.backgroundimg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("images/wedding-bg.jpg");
    /* change your image path */
    background-size: cover;
    background-position: center;
}

.hero-forms-wrapper {
    position: relative;
    margin-left: auto;
    margin-right: 80px;
    display: flex;
    gap: 20px;
    z-index: 2;
    align-items: stretch;
    /* This ensures equal height columns */
}

/* Form Card (Common for Search & Login) */
.register-form,
.login-banner-form {
    width: 360px;
    flex: 1 1 auto;
    /* Allow growth to match heights */
    padding: 25px 30px;
    /* More compact padding */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    /* Fill the flex container height */
}

.login-banner-form {
    position: relative;
    overflow: hidden;
}

/* Subtle decorative circle for login form */
.login-banner-form::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(104, 159, 56, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.login-banner-form>* {
    position: relative;
    z-index: 1;
}

.login-banner-form .login-header-group {
    text-align: center;
    margin-bottom: 25px;
    padding-top: 5px;
}

.login-banner-form h2 {
    font-size: 26px;
    margin-bottom: 5px;
}

.login-banner-form .login-subtitle {
    font-size: 13px;
    color: #888;
    font-weight: 500;
}

.register-form {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
}

/* Form Headings */
.register-form h2,
.login-banner-form h2 {
    text-align: center;
    margin-bottom: 2px;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    /* Slightly smaller heading */
    color: #1b2e1b;
}

.register-form h2 span,
.login-banner-form h2 span {
    color: #689f38;
}

.login-banner-form .input-group {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 46px;
    align-items: center;
}

.login-banner-form .input-group:focus-within {
    border-color: #689f38;
    box-shadow: 0 0 0 4px rgba(104, 159, 56, 0.1);
}

.login-banner-form .input-group-text {
    border: none !important;
    background: transparent !important;
    color: #689f38 !important;
    /* Theme Green */
    padding-right: 0 !important;
    font-size: 18px !important;
}

.login-banner-form .form-control {
    border: none !important;
    background: transparent !important;
    height: 100% !important;
    font-size: 14px;
    padding-left: 12px !important;
}

.login-banner-form .form-control:focus {
    box-shadow: none !important;
}

.banner-footer {
    padding-top: 10px;
    min-height: 55px;
    /* More compact height while keeping buttons aligned */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.banner-footer p {
    margin-bottom: 5px;
}

.form-label-custom {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #1b2e1b;
    margin-bottom: 3px;
    margin-left: 0;
}

.photo-status-group {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #1b2e1b;
}

.photo-status-group label {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Tight space between label and input */
}

/* Inputs & Select */
.register-form select,
.register-form input {
    padding: 4px 10px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: rgba(255, 255, 255, 0.95);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: #333;
    width: 100%;
    transition: all 0.3s ease;
    outline: none;
    line-height: 1;
}

/* Form Row for Search Layout */
.form-row {
    width: 100%;
}

.form-row.d-flex {
    width: 100%;
}

.form-row.d-flex>select {
    width: calc(50% - 4px);
    height: 32px;
    /* Account for gap */
}

/* input focus */
.register-form select:focus,
.register-form input:focus {
    border-color: #689f38;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(104, 159, 56, 0.15);
}

.register-form select {
    accent-color: #689f38;
    cursor: pointer;
}

/* Banner & Master Buttons Consolidation */
.banner-btn {
    margin-top: auto !important;
    width: 100%;
    height: 40px;
    /* Reduced to standard 40px height */
    padding: 0 15px;
    background: linear-gradient(135deg, #689f38, #5aab2a);
    border: none;
    border-radius: 8px;
    /* Slightly smaller radius for smaller button */
    color: white !important;
    font-size: 14px;
    /* Standard font size */
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(104, 159, 56, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

.banner-btn:hover {
    background: linear-gradient(135deg, #558b2f, #4a9020);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(104, 159, 56, 0.35);
    color: white !important;
}

/* ============================= */
/* FEATURE SECTION STYLING  headline used */
/* ============================= */

.feature-section {
    padding: 100px 0;
    background: #f9fafc;
}

.feature-card-tittle p {
    font-size: 14px;
    letter-spacing: 2px;
    color: #888;
}

.feature-card-tittle h2 {
    font-size: 42px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 80px;
}

.feature-card-tittle h2 span {
    color: #5aab2a;
    text-decoration: none;
}

/* ============================= */
/* FLOATING CARD STYLE */
/* ============================= */

.feature-card {
    background: #ffffff;
    padding: 60px 25px 30px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* Icon Circle */
.icon-box {
    width: 80px;
    height: 80px;
    background: #F1EEFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Different soft colors for each icon background */
.icon-2 {
    background: #EAF3FF;
}

.icon-3 {
    background: #FFF3E0;
}

/* Icon Image */
.icon-box img {
    width: 40px;
}

/* Text Styling */
.feature-card h4 {
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 20px;
    color: #222;
}

.feature-card p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}

/* ============================= */
/* PLANS SECTION STYLING */
/* ============================= */

/* Styles entire plans section */
.plans-section {
    padding: 80px 0;
    /* Top and bottom spacing */
    text-align: center;
    /* Center align text */
    background: #f1f8e9;
    /* Very light green background */
}

/* Section title style */
.section-title {
    font-size: 32px;
    /* Bigger heading */
    margin-bottom: 50px;
    /* Space below heading */
    color: #33691e;
    /* Dark green */
}

/* ============================= */
/* FLEX CONTAINER */
/* ============================= */

/* ============================= */
/* SECTION STYLE */
/* ============================= */

.plans-section {
    background: #eef4ea;
    /* light green background */
    padding: 80px 20px;
    text-align: center;
}


/* ============================= */
/* HEADING */
/* ============================= */

.plan-heading {
    font-size: 40px;
    font-weight: 600;
    color: #1b2e1b;
    margin-bottom: 50px;
}

.plan-heading span {
    color: #6fae3d;
}


/* ============================= */
/* CARD CONTAINER */
/* ============================= */

.plan-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    padding: 20px 0;
}


/* ============================= */
/* CARD DESIGN */
/* ============================= */

/* PLAN CARD */

.plan-card {
    background: #ffffff;
    width: 320px;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: 0.4s;
}


/* Green hover animation from right */

/* Hover color from right corner */

.plan-card {
    position: relative;
    overflow: hidden;
}

.plan-card::before {
    content: "";
    position: absolute;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    background: #6fae3d;
    border-radius: 50%;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.5s ease-out;
    z-index: 0;
}

.plan-card:hover::before {
    transform: scale(30);
}

.plan-card * {
    position: relative;
    z-index: 2;
}

/* ============================= */
/* PLAN TITLE */
/* ============================= */

.plan-card h3 {
    font-size: 26px;
    margin-bottom: 10px;
    color: #1f2937;
}


/* ============================= */
/* PRICE */
/* ============================= */

.price {
    font-size: 30px;
    font-weight: bold;
    margin: 15px 0;
    color: #689f38;
}


/* ============================= */
/* FEATURES LIST */
/* ============================= */

.plan-card ul {
    list-style: none;
    padding: 0;
    margin: 20px auto;

    width: fit-content;

    opacity: 0;
    max-height: 0;
    overflow: hidden;

    transition: 0.4s ease;
}


/* Each feature row */

.plan-card ul li {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Show features on hover */

.plan-card:hover ul {
    opacity: 1;
    max-height: 200px;
}


/* Icon style */

.plan-card ul li i {
    color: #689f38;
    font-size: 16px;
    min-width: 18px;
    /* keeps icon alignment straight */
}


/* Show features when hover */

.plan-card:hover ul {
    opacity: 1;
    transform: translateY(0);
}


/* Change text color on hover */

.plan-card:hover h3,
.plan-card:hover .price,
.plan-card:hover ul li {
    color: white;
}

.plan-card:hover ul li i {
    color: white;
}


/* ============================= */
/* BUTTON */
/* ============================= */

.plan-card button {
    background: white;
    color: #6fae3d;
    border: 2px solid #6fae3d;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
}


/* Button hover */

/* .plan-card button:hover {
    background: #6fae3d;
    color: white;
    box-shadow: 0 6px 20px rgba(111, 174, 61, 0.35);
    transform: translateY(-3px);
} */


/* ============================= */
/* OPTIONAL: HIGHLIGHT PLATINUM */
/* ============================= */

.platinum {
    border: 2px solid #6fae3d;
    transform: scale(1.05);
}


/* About Section */
.about-section {
    padding: 70px 0;
    background: #f9fbf8;
}

/* Row layout: video left, text right */
.about-section .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    /* vertical center */
    gap: 30px;
    /* spacing between video & text */
}

/* Video Box */
.video-box {
    flex: 0 0 50%;
    /* take left 50% */
    min-width: 300px;
}

.video-box iframe {
    width: 100%;
    height: 350px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: 0.3s;

    /* Scroll Animation */
    animation: fadeSlideRight 1s ease-out forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

.video-box iframe:hover {
    transform: scale(1.02);
}

/* Content Box */
.content-box {
    flex: 0 0 50%;
    /* take right 50% */
    min-width: 300px;
    padding-left: 20px;
    /* spacing from video */

    /* Scroll Animation */
    animation: fadeSlideLeft 1s ease-out forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

.content-box h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #222;
}

.video-heading span {
    color: #5aab2a;
}

.content-box p {
    font-size: 17px;
    line-height: 1.7;
    color: #666;
    margin-bottom: 25px;
}

/* Features List */
.features-list ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.features-list ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    margin-bottom: 14px;
    color: #444;

    /* Staggered Scroll Animation properties */
    opacity: 0;
    animation: fadeUpItem 0.6s ease-out forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
}

/* Hardcode staggered delays since CSS view() doesn't auto-stagger well */
.features-list ul li:nth-child(1) {
    animation-delay: 0.1s;
}

.features-list ul li:nth-child(2) {
    animation-delay: 0.2s;
}

.features-list ul li:nth-child(3) {
    animation-delay: 0.3s;
}

.features-list ul li:nth-child(4) {
    animation-delay: 0.4s;
}

.features-list ul li i {
    color: #689f38;
    font-size: 18px;
}

/* Button */
.about-section .btn {
    background: #689f38;
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
    display: inline-block;
}

.about-section .btn:hover {
    background: #558b2f;
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .about-section .row {
        flex-direction: column;
        /* stack video + text */
        text-align: center;
    }

    .content-box {
        padding-left: 0;
        margin-top: 20px;
    }

    .features-list ul li {
        justify-content: center;
        /* center bullets on mobile */
    }
}

/* =============================
/* Mobile App Section */
/* ============================= */

.mobile-app-section {
    background: #eef4ea;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0;
}

/* Decorative blobs */
.mobile-app-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(104, 159, 56, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.mobile-app-section::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -80px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(104, 159, 56, 0.13) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.app-inner {
    width: 100%;
    /* padding: 80px 60px; */
    position: relative;
    z-index: 1;
}

/* ===== LEFT TEXT ===== */
.small-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #689f38;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.main-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    color: #1b2e1b;
    line-height: 1.2;
    margin-bottom: 50px;
}

.main-title span {
    color: #5aab2a;
    display: inline-block;
}

.main-title span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 3px;
    border-radius: 2px;
}

.app-description {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* left side text space mobile section text  */
.mobile-section-heading {
    margin-left: 0;

    /* Scroll Animation */
    animation: fadeUpItem 1s ease-out forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
}

/* ===== STAT CARDS ===== */
.stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    /* closer to match store-buttons */
    flex-wrap: wrap;
    margin-left: 0;
    align-items: center;
    transition: transform 0.3s ease;
}

.stats-row:hover {
    transform: scale(1.02);
}

.stat-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px 25px;
    width: 230px;
    height: 105px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.stat-icon {
    background: #e8f5e9;
    color: #5aab2a;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 26px;
    flex-shrink: 0;
}

.stat-info h3 {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #1b2e1b;
    margin-bottom: 0px;
    line-height: 1.1;
}

.stat-info p {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #777;
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.stat-info .stars {
    color: #fbbc04;
    /* Google yellow */
    font-size: 15px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ===== STORE BUTTONS ===== */
.store-buttons {
    display: flex;
    gap: 20px;
    /* Reduced gap for better balance */
    flex-wrap: wrap;
    margin-left: 0;
    margin-top: 10px;
}

.store-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    background: #111;
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    width: 230px;
    height: 75px;
}

.store-btn:hover {
    background: #1a1a1a;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    color: #fff;
}

.store-btn .store-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.store-btn .store-icon.google {
    color: #34a853;
}

.store-btn .store-icon.apple {
    color: #fff;
    font-size: 26px;
}

.store-btn .btn-text small {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    line-height: 1;
}

.store-btn .btn-text strong {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

/* ===== RIGHT IMAGE ===== */
.phones-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    min-height: 440px;
}


.phone-mockup {
    position: relative;
    width: 240px;
    flex-shrink: 0;
}

.phone-mockup.front {
    z-index: 2;
    margin-right: -40px;
    animation: floatFront 4s ease-in-out infinite;
}

.phone-mockup.back {
    z-index: 1;
    margin-bottom: 40px;
    opacity: 0.92;
    animation: floatBack 4s ease-in-out infinite 0.6s;
}

@keyframes floatFront {

    0%,
    100% {
        transform: translateY(0px);
    }

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

@keyframes floatBack {

    0%,
    100% {
        transform: translateY(0px) rotate(3deg);
    }

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

.phone-shell {
    background: #111;
    border-radius: 36px;
    padding: 10px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.30), 0 6px 20px rgba(0, 0, 0, 0.18);
    position: relative;
}

.phone-shell::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 14px;
    background: #000;
    border-radius: 10px;
    z-index: 3;
}

.phone-screen {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 9/19;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 14px 18px;
}

.screen-logo {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 700;
    color: #3a7d0a;
    text-align: center;
    margin-bottom: 10px;
}

.screen-hero-img {
    width: 100%;
    height: 110px;
    background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-bottom: 14px;
}

.screen-card {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.screen-card h5 {
    font-family: 'Playfair Display', serif;
    font-size: 13px;
    font-weight: 700;
    color: #1b2e1b;
    margin-bottom: 5px;
}

.screen-card p {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
}

.screen-btn {
    background: linear-gradient(90deg, #6abf2e, #4a8c1c);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    padding: 5px 14px;
    border-radius: 20px;
    float: right;
}

/* ===== BACK PHONE ===== */
.back-screen {
    background: linear-gradient(160deg, #e8f5e9 0%, #c8e6c9 100%);
    padding: 24px 14px;
    text-align: center;
}

.back-screen-couple {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #b2dfdb, #80cbc4);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    margin-bottom: 12px;
}

.back-screen h4 {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 700;
    color: #2e7d32;
}

/* ===== FLOATING BADGE ===== */
.floating-badge {
    position: absolute;
    bottom: 80px;
    right: -10px;
    background: #fff;
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: floatBadge 3s ease-in-out infinite 1s;
}

@keyframes floatBadge {

    0%,
    100% {
        transform: translateY(0);
    }

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

.floating-badge .badge-icon {
    font-size: 20px;
}

.floating-badge .badge-text small {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    color: #888;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.floating-badge .badge-text strong {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #2e7d32;
    font-weight: 700;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .app-inner {
        padding: 60px 30px;
        text-align: center;
    }

    .stats-row {
        justify-content: center;
    }

    .store-buttons {
        justify-content: center;
    }

    /* .phones-wrapper {
        min-height: 320px;
        margin-top: 50px;
    } */

    .phone-mockup {
        width: 170px;
    }
}

@media (max-width: 575px) {
    .app-inner {
        padding: 50px 20px;
    }

    .stat-card {
        min-width: 140px;
        padding: 18px 22px;
    }

    .stat-card h3 {
        font-size: 20px;
    }

    .phone-mockup {
        width: 140px;
    }
}

/* ============================= */
/* About Us Page */
/* ============================= */
/* About Us Page Banner Background Image */
.about-us-banner {
    position: relative;
    width: 100%;
    height: 90vh;
    /* adjust height */
    background-image: url("../image/about\ us\ banner\ image.svg");
    background-size: cover;
    background-position: center;
}

/* Gradient overlay to make text readable */
.about-us-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 60%);
    z-index: 1;
}

.about-us-banner .aboutus-child {
    position: absolute;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 550px;
    z-index: 2;
    color: white;
}



/* About Us Page banner content height set*/
.aboutus-child {
    height: 600px
}

/* About Us Page banner content*/
.about-us-heading {
    margin-left: 60px;
}

.banner {
    position: relative;
    background: url('banner.jpg') center/cover no-repeat;
    height: 500px;
    display: flex;
    align-items: center;
    padding-left: 80px;
}

/* Dark overlay */
.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    /* only left side dark */
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
}

/* text content */
.about-us-heading {
    position: relative;
    max-width: 500px;
    top: 50%;
    transform: translateY(-50%);
}

.about-us-heading h1 {
    font-family: 'Playfair Display', serif;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.about-us-heading h1 span {
    color: #5aab2a;
}

.about-us-heading p {
    font-size: 19px;
    line-height: 1.6;
    color: #ffffff;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    opacity: 0.95;
}

/* About Us Page Our Story section content*/
.our-story {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    background-color: #f9fbf8;
}

.our-story-heading {
    max-width: 800px;
    text-align: center;
    background: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
}

.our-story-heading h1 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
}

.our-story-heading span {
    color: #5fae3e;
    /* your site green color */
}

.our-story-heading p {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    max-width: 90%;
    margin: 0 auto;
}

/* Scroll reveal animation removed to allow AOS to handle it */

/* COMMON SECTION STYLE (both sections same height) */

.mission-section-main,
.why-choose-us-main {
    padding: 80px 0;
    background: #f1f8e9;
}


/* Make row equal height */

.mission-section .row,
.why-choose-us .row {
    min-height: 420px;
}


/* Content box style */

.aboutus-mission-section,
.why-choose-us-section {
    max-width: 520px;
}


/* Heading style */

.aboutus-mission-section h2,
.why-choose-us-section h2 {
    font-size: 40px;
    font-weight: 600;
    color: #1b2e1b;
    margin-bottom: 20px;
}

.aboutus-mission-section h2 span,
.why-choose-us-section h2 span {
    color: #6fae3d;
}


/* Paragraph style */

.aboutus-mission-section p,
.why-choose-us-section p {
    font-size: 17px;
    line-height: 1.7;
    color: #1b2e1b;
}

/* Image container */

.mission-section-image,
.why-choose-us-image {
    overflow: hidden;
    /* required for zoom animation */
    border-radius: 8px;
}


/* Image style */

.mission-section-image img,
.why-choose-us-image img {
    width: 100%;
    border: 1px solid #5fae3e;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.5s ease;
}

/* Hover zoom animation */

.mission-section-image:hover img,
.why-choose-us-image:hover img {
    transform: scale(1.06);
}

/* About Us Page Counter Section*/
.about-stats-section {
    padding: 80px 0;
    background-color: #fff;
}

.about-stats-icon img {
    width: 80px;
}

.about-stats-box {
    background: #ffffff;
    padding: 40px 20px;
    border-radius: 10px;
    transition: 0.3s;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.08);
}

.about-stats-box:hover {
    transform: translateY(-8px);
}

.about-stats-icon {
    font-size: 40px;
    margin-bottom: 15px;
}


.about-stats-box h2 {
    font-size: 32px;
    font-weight: 700;
    color: #5fae3e;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.about-stats-box p {
    font-size: 14px;
    color: #888;
    margin-bottom: 0;
}

.stats-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 30px;
}

/* .icon-blue {
    background: #e3f2fd;
    color: #2196f3;
}

.icon-red {
    background: #fce4ec;
    color: #f06292;
}

.icon-teal {
    background: #e0f2f1;
    color: #009688;
} */

/*Why Choose Us Seaction*/

.why-choose-us-list ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    margin-bottom: 14px;
}

.why-choose-us-list ul li i {
    color: #689f38;
    font-size: 18px;
}

/* Add space between image and text only for Why Choose Us */

.why-choose-us-section {
    padding-left: 70px;
}

/* ============================= */
/* SECTION HEADING STYLE */
/* Used for Search & Payment pages */
/* ============================= */

.payment-heading-section {
    text-align: center;
    padding: 80px 20px 40px;
}

/* Small top tag line */
.section-tag {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6fae3d;
    margin-bottom: 10px;
    font-weight: 500;
}

/* Main heading */
.search-title {
    font-size: 40px;
    font-weight: 600;
    color: #1b2e1b;
    margin-bottom: 15px;
}

/* Highlight word */
.search-title span {
    color: #6fae3d;
}

/* Subtitle / description */
.search-subtitle {
    font-size: 17px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.payment-plan-section {
    padding: 80px 20px;
    background: #f5f5f5;
}

.payment-plan-wrapper {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

/* CARD */

.payment-plan-card {
    width: 300px;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    background: white;
    border: 2px solid #e5e5e5;
    transition: 0.3s;
    cursor: pointer;
}

/* HOVER */

.payment-plan-card:hover {
    transform: translateY(-10px);
    border-color: #6fae3d;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* TITLE */

.payment-plan-card h3 {
    font-size: 26px;
    margin-bottom: 15px;
    color: #1b2e1b;
}

/* PRICE */

.payment-plan-card h2 {
    font-size: 32px;
    margin-bottom: 25px;
    color: #6fae3d;
}

/* FEATURES */

.payment-plan-card p {
    margin: 10px 0;
    font-size: 16px;
    color: #555;
}

/* BUTTON */

.payment-plan-card button {
    margin-top: 20px;
    padding: 10px 24px;
    border-radius: 25px;
    border: 2px solid #6fae3d;
    background: transparent;
    color: #6fae3d;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.payment-plan-card button:hover {
    background: #6fae3d;
    color: white;
}

/* Payment Page Form  */
.payment-user-form {
    margin-top: 30px;
}

.payment-user-form h3 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #1b2e1b;
}

.payment-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.payment-form-group label {
    margin-bottom: 5px;
    font-size: 14px;
    color: #555;
}

.payment-form-group input {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 15px;
}

.payment-form-group input:focus {
    outline: none;
    border-color: #6fae3d;
}

/* ============================= */
/* Contact Us Page */
/* ============================= */
/* Contact banner background */
.contact-us-banner {
    width: 100%;
    height: 100vh;
    background-image: url("image/contact us banner image.svg");
    background-size: cover;
    background-position: center;
    position: relative;
}


/* Softer overlay like About page */
.contact-us-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    /* lighter overlay */
}


/* Content wrapper */
.aboutus-child {
    height: 600px;
    position: relative;
    z-index: 2;
}


/* Banner content alignment */
.contact-banner {
    height: 500px;
    display: flex;
    align-items: center;
    padding-left: 80px;
}


/* Heading style */
.contact-us-heading h1 {
    font-size: 52px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    font-family: "Playfair Display", serif;
}


/* Highlight word */
.contact-us-heading h1 span {
    color: #6fae3d;
}


/* Paragraph style */
.contact-us-heading p {
    font-size: 17px;
    line-height: 1.8;
    color: #f1f1f1;
    max-width: 480px;
}

/* Map Section*/

.map-section {
    padding: 80px 0;
}

.map-box iframe {
    width: 100%;
    height: 350px;
    border-radius: 10px;
}

.contact-us-details {
    margin-left: 35px;
}

.map h2 {
    font-size: 40px;
    font-weight: 600;
    color: #1b2e1b;
    margin-bottom: 30px;
    margin-left: 35px;
}

.map h2 span {
    color: #6fae3d;
}

.contact-us-details h3 {
    color: #6fae3d;
    font-size: 20px;
    margin-top: 15px;
}

.contact-us-details p {
    color: #444;
    line-height: 1.6;
}

.contact-us-details p i {
    color: #689f38;
    font-size: 18px;
    margin-right: 8px;
}

/* Contact Us From */
.contact-form-section {
    padding: 80px 0;
    background: #f7faf6;
}

.contact-us-form-text h2 {
    font-size: 38px;
    font-weight: 600;
    color: #1b2e1b;
    margin-bottom: 20px;
}

.contact-us-form-text p {
    font-size: 17px;
    line-height: 1.7;
    color: #555;
}

.contact-us-form {
    background: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.08);
}

.contact-us-form input,
.contact-us-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
}

.contact-us-form textarea {
    height: 120px;
    resize: none;
}

.contact-us-form button {
    background: #689f38;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-size: 16px;
}

.contact-us-form button:hover {
    background: #33691e;
}

/* ============================= */
/*  Search Profile filed*/
/* ============================= */

/* Small text above heading (section label) */
.section-tag {
    font-size: 14px;
    /* Small text size */
    letter-spacing: 2px;
    /* Space between letters */
    text-transform: uppercase;
    /* Convert text to uppercase */
    color: #8a8a8a;
    /* Light grey color */
    margin-bottom: 10px;
    /* Space below text */
}


/* Main section heading */
.search-title {
    font-size: 36px;
    /* Large heading size */
    font-weight: 700;
    /* Bold text */
    color: #2f3e46;
    /* Dark professional color */
    margin-bottom: 15px;
    /* Space below heading */
}


/* Highlight word inside heading */
.search-title span {
    color: #689f38;
    /* Green highlight color */
}


/* Optional decorative line under heading */
.search-title::after {
    content: "";
    /* Creates a decorative element */
    display: block;
    /* Makes it behave like a block */
    width: 60px;
    /* Line width */
    height: 3px;
    /* Line thickness */
    background: #689f38;
    /* Green line color */
    margin: 12px auto 0;
    /* Center the line */
    border-radius: 2px;
    /* Slightly rounded edges */
}

/* Reset default browser spacing and set global font */
body {
    font-family: Arial, sans-serif;
    /* Set default font for entire page */
    margin: 0;
    /* Remove default margin */
    padding: 0;
    /* Remove default padding */
    background: #f5f5f5;
    /* Light grey page background */
}


/* Main search page section (Heading area stays white) */
.searchpage {
    padding: 80px 20px;
    /* Space around content */
    text-align: center;
    /* Center align text */
    background: #ffffff;
    /* Keep heading area white */
}


/* Main title styling */
.search-title {
    font-size: 32px;
    /* Large heading text */
    margin-bottom: 10px;
    /* Space below title */
}


/* Subtitle styling */
.search-subtitle {
    color: #666;
    /* Soft grey text color */
    margin-bottom: 40px;
    /* Space before cards section */
}


/* CARD SECTION BACKGROUND */
/* This creates the green background only behind the cards */
.cards {
    display: flex;
    /* Place cards in a row */
    justify-content: center;
    /* Center cards horizontally */
    gap: 30px;
    /* Space between cards */
    background: #e8f5e9;
    /* Light green background behind cards */
    padding: 60px 0;
    /* Vertical spacing inside section */
}


/* COMMON CARD STYLE */
.cards .card {
    display: flex;
    align-items: center;
    /* Center items vertically */
    justify-content: center;
    /* Center items horizontally */
    flex-direction: column;
    /* Stack icon + text vertically */
    text-align: center;
    height: 220px;
    width: 260px;
    border-radius: 15px;
    /* Rounded corners */
    cursor: pointer;
    transition: 0.4s;
    /* Smooth hover animation */
    padding: 20px;
    background: #ffffff;
    /* Cards stay white for clean design */
}


/* CARD ICON IMAGE STYLE */
.cards .card img {
    width: 60px;
    /* Icon size */
    height: 60px;
    object-fit: contain;
    /* Keep image proportions */
    margin-bottom: 12px;
    /* Space below icon */
}


/* CARD TITLE TEXT */
.tip {
    font-size: 18px;
    font-weight: 600;
    /* Slightly bold */
    color: #2f3e46;
    /* Dark grey text */
    margin-bottom: 6px;
}


/* CARD DESCRIPTION TEXT */
.second-text {
    font-size: 14px;
    color: #6b7280;
    /* Light grey text */
}


/* CARD HOVER EFFECT */
/* Card slightly zooms and shows shadow */
.cards .card:hover {
    transform: scale(1.08);
    /* Slight zoom */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    /* Soft shadow */
}


/* BLUR EFFECT */
/* When one card is hovered, the other card becomes blurred */
.cards .card:hover+.card,
.cards .card:has(+ .card:hover) {
    filter: blur(6px);
    /* Blur other card */
    transform: scale(0.95);
    /* Slightly shrink */
}


/* OPTIONAL ICON STYLE */
/* If you use icon fonts instead of images */
.card-icon {
    font-size: 40px;
    color: #5fae3e;
    /* Green icon color */
    margin-bottom: 15px;
}

.search-form {
    display: none;
    max-width: 900px;
    margin: 80px auto 0;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.form-row {
    display: flex;
    /* gap: 20px; */
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.form-group label {
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group select {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* Advance Search Button */
.search-btn {
    margin-top: 20px;
}

.search-btn button {
    padding: 12px 35px;
    background: #689f38;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

/* Button hover */
.search-btn button:hover {
    background: #33691e;
}

/* Usera id  Search Button */
.userid-btn {
    margin-top: 20px;
    padding: 10px 25px;
    background: #689f38;
    border: none;
    color: white;
    border-radius: 6px;
}

/* Button hover */
.userid-btn:hover {
    background: #33691e;
}

#userIdForm input {
    padding: 10px;
    width: 250px;
    border-radius: 6px;
    border: 1px solid #ccc;
    margin-top: 15px;
}


/* ============================= */
/* Footer Section */
/* ============================= */
.footer {
    background: #000;
    color: #fff;
    padding-top: 60px;
}

.footer-container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 40px 10px;
    display: flex;
    justify-content: space-between;
    gap: 50px;
    flex-wrap: wrap;
}

.footer-box,
.footer-contact {
    min-width: 250px;
}

.footer-box:nth-child(1) {
    flex: 1.5;
}

.footer-box:nth-child(2) {
    flex: 1;
}

.footer-box:nth-child(3) {
    flex: 1.5;
}

.footer-box .footer-logo {
    display: block;
    margin-bottom: 25px;
}

.footer-box p,
.footer-box .d-flex p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #ccc;
    margin-bottom: 20px;
}

.footer-box h4 {
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    font-family: 'Playfair Display', serif;
}

.footer-box ul {
    list-style: none;
    padding: 0;
}

.footer-box ul li {
    margin-bottom: 12px;
}

.footer-box ul li a {
    text-decoration: none;
    color: #ccc;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    transition: 0.3s;
}

.footer-box ul li a:hover {
    color: #689f38;
}

/* Social Icons */
.footer-box .social-icons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.footer-box .social-icons i {
    font-size: 18px;
    color: #fff;
    background: #2a2a2a;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    cursor: pointer;
    padding: 0;
}

.social-icons a {
    text-decoration: none;
}


.footer-box .social-icons i:hover {
    background: #689f38;
    transform: scale(1.1);
}

/* Bottom */
.footer-bottom {
    margin-top: 0px;
    padding-top: 15px;
    text-align: center;
    font-size: 13px;
    color: #aaa;
}

.ocean p a {
    text-decoration: none;
    color: #aaa;
}

/* ============================= */
/* Custom Animations */
/* ============================= */

/* Hero Heading Fade In */
@keyframes heroFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Subtitle Slide Up */
@keyframes heroSlideUp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Form Soft Fade */
@keyframes heroFadeInSoft {
    0% {
        opacity: 0;
        transform: translateY(-40%);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%);
    }
}

.hero-text-container h1 {
    animation: heroFadeIn 0.8s ease forwards;
}

.hero-text-container p {
    opacity: 0;
    animation: heroSlideUp 0.8s ease 0.3s forwards;
}

/* Mobile Stat Cards Soft Pop-in on scroll */
@keyframes softPopIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Phones Wrapper Slide Right Appearance */
@keyframes phoneSlideInRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.phones-wrapper {
    opacity: 0;
    animation: phoneSlideInRight 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

/* About Section Scroll Animations */
@keyframes fadeSlideRight {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeSlideLeft {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeUpItem {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Membership Card Subtle Scale is handled above */

/* Payment Modal Styles */
.payment-modal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.payment-modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: modalScaleUp 0.3s ease-out forwards;
}

@keyframes modalScaleUp {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.payment-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    line-height: 1;
}

.payment-close:hover {
    color: #d9534f;
}

.payment-modal-inner {
    margin-top: 10px;
}

.payment-summary {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-summary p {
    margin: 0;
    font-size: 16px;
    color: #444;
}

.payment-summary span {
    font-weight: 600;
    color: #689f38;
}

.payment-user-form h3 {
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    margin-bottom: 15px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.payment-form-group {
    margin-bottom: 12px;
}

.payment-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 13px;
    color: #555;
}

.payment-form-group input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
}

.payment-form-group input:focus {
    border-color: #689f38;
    outline: none;
    box-shadow: 0 0 0 3px rgba(104, 159, 56, 0.1);
}

.payment-user-form .btn {
    background: linear-gradient(135deg, #689f38, #5aab2a);
    border: none;
    color: white;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(104, 159, 56, 0.2);
}

.payment-user-form .btn:hover {
    background: linear-gradient(135deg, #558b2f, #4a9020);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(104, 159, 56, 0.35);
}

/* ============================= */
/* Search Profile Cards Styles */
/* ============================= */
.search-results-section {
    padding-top: 50px;
    background: #fdfdfd;
}

.profile-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #eee;
    margin-bottom: 30px;
}

.profile-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: #689f38;
}

.profile-img-container {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
    background: #e8f5e9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-img-container i {
    font-size: 80px;
    color: #689f38;
}

.profile-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info {
    padding: 20px;
}

.profile-info h3 {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin-bottom: 5px;
}

.profile-id {
    color: #888;
    font-size: 13px;
    margin-bottom: 15px;
    display: block;
}

.profile-details {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.profile-details li {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.profile-details li i {
    color: #689f38;
    margin-right: 10px;
    width: 16px;
    text-align: center;
}

.profile-action-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 2px solid #689f38;
    color: #689f38;
    border-radius: 6px;
    font-weight: 600;
    transition: 0.3s;
}

.profile-action-btn:hover {
    background: #689f38;
    color: white;
}

/* ============================= */
/* Authentication Pages Styles   */
/* ============================= */
.auth-section {
    padding: 100px 20px;
    background: #f8fcf8;
    min-height: calc(100vh - 400px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-container {
    background: #ffffff;
    width: 100%;
    max-width: 450px;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #eef5ee;
}

.auth-container.register-container {
    max-width: 800px;
}

.auth-container h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #222;
}

.auth-container h2 span {
    color: #689f38;
}

.auth-container label {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}

.auth-container .form-control,
.auth-container .form-select {
    padding: 12px 15px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.auth-container .form-control:focus,
.auth-container .form-select:focus {
    border-color: #689f38;
    box-shadow: 0 0 0 0.2rem rgba(104, 159, 56, 0.25);
}

.auth-container .input-group-text {
    background: #f8fcf8;
    color: #689f38;
    border-color: #ddd;
}

.auth-btn {
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(104, 159, 56, 0.3);
}

.auth-links p {
    font-size: 14px;
    color: #666;
}

.auth-links a {
    color: #689f38;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.auth-links a:hover {
    color: #33691e;
    text-decoration: underline;
}

.auth-container h5 {
    color: #689f38;
    font-weight: 600;
    font-size: 18px;
    border-bottom: 2px solid #eef5ee;
    padding-bottom: 8px;
}

/* ============================= */
/* Full Profile Modal (Bio-Data) */
/* ============================= */

.fp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    animation: fp-fadeIn 0.3s ease;
}

@keyframes fp-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fp-modal {
    background: #ffffff;
    border-radius: 16px;
    max-width: 780px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    animation: fp-slideUp 0.35s ease;
}

@keyframes fp-slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

.fp-modal-body {
    padding: 40px;
}

.fp-close-btn {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    color: #999;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    transition: color 0.2s;
}

.fp-close-btn:hover {
    color: #333;
}

/* Header (avatar + name) */
.fp-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 2px solid #eef5ee;
}

.fp-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: 3px solid #689f38;
}

.fp-avatar i {
    font-size: 40px;
    color: #33691e;
}

.fp-header-info h2 {
    font-size: 26px;
    font-weight: 700;
    color: #1b2e1b;
    margin: 0 0 6px 0;
    font-family: 'Playfair Display', serif;
}

.fp-id {
    font-size: 14px;
    color: #888;
    letter-spacing: 0.5px;
}

.fp-badge {
    display: inline-block;
    margin-left: 12px;
    padding: 3px 14px;
    background: #e8f5e9;
    color: #33691e;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Sections */
.fp-section {
    margin-bottom: 28px;
}

.fp-section h4 {
    font-size: 17px;
    font-weight: 600;
    color: #689f38;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef5ee;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fp-section h4 i {
    font-size: 18px;
}

.fp-about-text {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    background: #f9fbf8;
    padding: 16px 20px;
    border-radius: 8px;
    border-left: 3px solid #689f38;
    margin: 0;
}

/* Detail Grid */
.fp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 30px;
}

.fp-field {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    background: #f9fbf8;
    border-radius: 6px;
}

.fp-label {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
    font-weight: 500;
}

.fp-value {
    font-size: 15px;
    font-weight: 500;
    color: #1b2e1b;
}

/* Scrollbar styling for the modal */
.fp-modal::-webkit-scrollbar {
    width: 6px;
}

.fp-modal::-webkit-scrollbar-track {
    background: transparent;
}

.fp-modal::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.fp-modal::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .fp-modal-overlay {
        padding: 15px;
    }

    .fp-modal-body {
        padding: 24px;
    }

    .fp-header {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }

    .fp-badge {
        margin-left: 0;
        margin-top: 6px;
    }

    .fp-grid {
        grid-template-columns: 1fr;
    }

    .fp-header-info h2 {
        font-size: 22px;
    }
}

/* Like Button */
.fp-like-section {
    text-align: center;
    padding-top: 10px;
    border-top: 2px solid #eef5ee;
    margin-top: 10px;
}

.fp-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    border: 2px solid #689f38;
    background: transparent;
    color: #689f38;
    font-size: 16px;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fp-like-btn i {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.fp-like-btn:hover {
    background: #e8f5e9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(104, 159, 56, 0.2);
}

.fp-like-btn.fp-liked {
    background: #fff0f3;
    border-color: #e74c6f;
    color: #e74c6f;
}

.fp-like-btn.fp-liked:hover {
    background: #ffe0e6;
    box-shadow: 0 4px 12px rgba(231, 76, 111, 0.2);
}

.fp-like-btn.fp-liked i {
    animation: fp-heartPop 0.4s ease;
}

@keyframes fp-heartPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/* Profile Dropdown Styling */
.profile-dropdown {
    position: relative;
    list-style: none;
    z-index: 99999 !important;
}

.profile-dropdown .profile-nav-btn {
    background: linear-gradient(135deg, #689f38, #5aab2a);
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    border: none;
    box-shadow: 0 4px 15px rgba(104, 159, 56, 0.2);
}

.profile-dropdown .profile-nav-btn:hover {
    background: linear-gradient(135deg, #558b2f, #4a9020);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(104, 159, 56, 0.35);
}

.profile-dropdown .dropdown-toggle::after {
    vertical-align: middle;
}

.profile-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 999999 !important;
    min-width: 220px;
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3) !important;
    border-radius: 12px;
    padding: 12px;
    margin-top: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.profile-dropdown .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Global Premium Button Style & Hover */
.btn-success,
.auth-btn,
.profile-action-btn,
.proceed-btn,
.userid-btn,
#editBtn,
.register-form button,
.btn-photo {
    background: linear-gradient(135deg, #689f38, #5aab2a) !important;
    border: none !important;
    color: white !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(104, 159, 56, 0.2) !important;
    cursor: pointer;
}

.btn-success:hover,
.auth-btn:hover,
.profile-action-btn:hover,
.proceed-btn:hover,
.userid-btn:hover,
#editBtn:hover,
.register-form button:hover,
.btn-photo:hover {
    background: linear-gradient(135deg, #558b2f, #4a9020) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(104, 159, 56, 0.35) !important;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.profile-dropdown .dropdown-item {
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 8px;
    transition: 0.3s;
    color: #333;
}

.profile-dropdown .dropdown-item:hover {
    background-color: #e8f5e9;
    color: #689f38;
}

/* Form Validation Feedback */
.register-form .error-msg {
    color: #d9534f;
    font-size: 12px;
    margin-top: -12px;
    margin-bottom: 5px;
    font-weight: 500;
    display: none;
}

.register-form input.is-invalid,
.register-form select.is-invalid {
    border-color: #d9534f !important;
    box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.1) !important;
}

/* Payment Modal Consistency */
#paymentModal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.payment-modal-content {
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    width: 100%;
    max-width: 460px;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    animation: modalScaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.payment-close {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 30px;
    cursor: pointer;
    color: #bbb;
    transition: 0.2s;
    line-height: 1;
}

.payment-close:hover {
    color: #333;
}

.payment-modal-inner h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
}

.payment-summary-box {
    background: #f9fbf8;
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid #eef5ee;
    margin-bottom: 25px;
}

.payment-form-group {
    margin-bottom: 18px;
}

.payment-form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #eee;
    border-radius: 10px;
    font-size: 15px;
    background: #fff;
    transition: 0.3s;
}

.payment-form-group input:focus {
    border-color: #689f38;
    outline: none;
    box-shadow: 0 0 0 4px rgba(104, 159, 56, 0.1);
}

.proceed-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #689f38, #5aab2a);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
    box-shadow: 0 8px 20px rgba(104, 159, 56, 0.2);
}

.proceed-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(104, 159, 56, 0.3);
}

/* City Autocomplete Styling */
.city-autocomplete-container {
    position: relative;
    width: 100%;
}

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    margin-top: 5px;
}

.autocomplete-suggestion {
    padding: 12px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #444;
    transition: background 0.2s;
    border-bottom: 1px solid #f9f9f9;
}

.autocomplete-suggestion:last-child {
    border-bottom: none;
}

.autocomplete-suggestion:hover {
    background: #f1f8e9;
    color: #689f38;
}

.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.highlight-suggestion {
    animation: pulseHighlight 1.5s ease-in-out;
}

@keyframes pulseHighlight {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 20px rgba(104, 159, 56, 0.4);
    }

    100% {
        transform: scale(1);
    }
}

/* News Section Styles */
.news-event-card {
    transition: transform 0.3s ease;
}

.news-event-card:hover {
    transform: translateY(-5px);
}

.blink {
    font-weight: bold;
    color: #d32f2f;
}

/* ============================= */
/* Standard Footer Styling */
/* ============================= */
.footer {
    background: #000 !important;
    color: #fff !important;
}

.social-link {
    width: 40px;
    height: 40px;
    background: #2a2a2a;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    text-decoration: none;
}

.social-link:hover {
    background: #689f38;
    color: #fff !important;
    transform: translateY(-3px);
}

.footer-nav-link {
    color: #ccc !important;
    font-size: 15px;
    text-decoration: none !important;
    transition: 0.3s;
}

.footer-nav-link:hover {
    color: #689f38 !important;
    padding-left: 5px;
}

.copyright-text {
    color: #888 !important;
    font-size: 13px;
}

.dev-link {
    color: #888 !important;
    font-weight: 600;
    text-decoration: none !important;
}

.dev-link:hover {
    color: #689f38 !important;
}

.footer h4 {
    position: relative;
    padding-bottom: 10px;
}

.footer h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: #689f38;
}

/* Mobile App Section */
.mobile-app-section {
    /* padding: 80px 0; */
    background: #f1f8e9;
    overflow: hidden;
}

.mobile-section-heading .small-title {
    color: #689f38;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.mobile-section-heading .main-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 700;
    color: #1b2e1b;
    margin-bottom: 20px;
}

.mobile-section-heading .main-title span {
    color: #689f38;
}

.app-description {
    color: #555;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.stats-row {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: #e8f5e9;
    color: #689f38;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 24px;
}

.stat-info h3 {
    font-weight: 700;
    margin: 0;
    color: #1b2e1b;
}

.stat-info p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.stars {
    color: #fbbc04;
    font-size: 14px;
}

.store-buttons {
    display: flex;
    gap: 15px;
}

.store-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1b2e1b;
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    text-decoration: none;
    transition: 0.3s;
}

.store-btn:hover {
    background: #000;
    transform: translateY(-3px);
    color: white;
}

.store-icon {
    font-size: 24px;
}

.btn-text small {
    display: block;
    font-size: 10px;
}

.btn-text strong {
    font-size: 16px;
}

/* Phone Mockups */
.phones-wrapper {
    position: relative;
    height: 500px;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

.phone-mockup {
    position: absolute;
    width: 250px;
    height: 500px;
    background: #000;
    border-radius: 40px;
    padding: 12px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
    border: 8px solid #1b1b1b;
}

.phone-mockup.back {
    left: 0;
    z-index: 1;
    background: #fff;
    border: 8px solid #000;
}

.phone-mockup.front {
    right: 0;
    top: 50px;
    z-index: 2;
    background: #fff;
    border: 8px solid #000;
}

.phone-shell {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.phone-screen {
    width: 100%;
    height: 100%;
}

.back-screen {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-badge {
    position: absolute;
    bottom: 50px;
    right: -20px;
    background: white;
    padding: 12px 20px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
}

.badge-icon {
    font-size: 24px;
}

.badge-text strong {
    display: block;
    font-size: 14px;
}

.badge-text small {
    color: #689f38;
    font-weight: 700;
}

/* Search Tabs Styling */
.search-tabs-container {
    max-width: 1000px;
    margin: 40px auto 30px;
}

.search-nav-tabs {
    display: flex;
    gap: 15px;
    border: none;
    margin-bottom: -1px;
    list-style: none;
    padding: 0;
}

.search-nav-link {
    background: #fff;
    border: 1px solid #f0f0f0;
    color: #1b2e1b;
    padding: 12px 25px;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    transition: 0.3s;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.02);
}

.search-nav-link:hover {
    background: #f8fcf5;
    color: #689f38;
}

.search-nav-link.active {
    background: #689f38;
    color: #fff !important;
    border-color: #689f38;
    box-shadow: 0 -5px 15px rgba(104, 159, 56, 0.1);
}

/* Membership Plans Section (Simplified Premium UI) */
.plans-strip-section {
    position: relative;
    z-index: 30;
    margin-top: -85px;
    padding-bottom: 50px;
}

.plans-glass-container {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border: 1px solid #fff;
    overflow: hidden;
}

.plans-flex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 50px;
    /* Symmetrical side padding */
    width: 100%;
}

.plan-item {
    padding: 20px 10px;
    display: flex;
    justify-content: center;
    flex: 1;
    /* Distribute space evenly */
}

.plan-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.icon-circle {
    width: 75px;
    height: 75px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    padding: 10px;
}

.plan-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.plan-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    /* Tight gap between price and button */
}

.plan-info h6 {
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 0;
    /* Removed bottom margin for better alignment */
    color: #1b2e1b;
    font-family: 'DM Sans', sans-serif;
}

.btn-join-now {
    background: linear-gradient(135deg, #689f38, #5aab2a) !important;
    color: #ffffff !important;
    height: 38px;
    /* Compact height for strip */
    padding: 0 20px !important;
    font-size: 12px;
    /* Smaller font for strip buttons */
    font-weight: 700;
    border-radius: 12px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border: none;
    display: inline-flex;
    /* Changed to inline-flex for vertical centering */
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    box-shadow: 0 6px 15px rgba(104, 159, 56, 0.2);
    white-space: nowrap;
}

.btn-join-now:hover {
    background-color: #558b2f !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(104, 159, 56, 0.3);
}

@media (max-width: 1200px) {
    .plans-strip-section {
        margin-top: -60px;
    }
}

@media (max-width: 991px) {
    .plans-strip-section {
        margin-top: 30px;
        padding: 0 20px 40px;
    }

    .plan-item {
        border-right: none !important;
        border-bottom: 1px solid #f5f5f5;
        padding: 25px;
    }
}

.search-tab-content {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
}

.search-result-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: #1b2e1b;
    margin-bottom: 30px;
    border-left: 5px solid #689f38;
    padding-left: 20px;
}

/* Hero Forms Responsiveness */
@media (max-width: 1400px) {
    .hero-forms-wrapper {
        right: 40px;
        gap: 15px;
    }

    .register-form,
    .login-banner-form {
        width: 100%;
        max-width: 380px;
        flex: 1 1 auto;
    }
}

@media (max-width: 1200px) {
    .hero-section {
        height: auto;
        min-height: 100vh;
        padding-bottom: 50px;
    }

    .hero-forms-wrapper {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin: 50px auto 0;
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-text-container {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 120px auto 0;
        text-align: center;
        max-width: 800px;
        padding: 0 20px;
        gap: 15px;
        border: none;
        margin-bottom: -1px;
        list-style: none;
        padding: 0;
    }

    .search-nav-link {
        background: #fff;
        border: 1px solid #f0f0f0;
        color: #1b2e1b;
        padding: 12px 25px;
        border-radius: 12px 12px 0 0;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none !important;
        transition: 0.3s;
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.02);
    }

    .search-nav-link:hover {
        background: #f8fcf5;
        color: #689f38;
    }

    .search-nav-link.active {
        background: #689f38;
        color: #fff !important;
        border-color: #689f38;
        box-shadow: 0 -5px 15px rgba(104, 159, 56, 0.1);
    }

    /* Membership Plans Section (Simplified Premium UI) */
    .plans-strip-section {
        position: relative;
        z-index: 30;
        margin-top: -85px;
        padding-bottom: 50px;
    }

    .plans-glass-container {
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
        border: 1px solid #fff;
        overflow: hidden;
    }

    .plans-flex-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 50px;
        /* Symmetrical side padding */
        width: 100%;
    }

    .plan-item {
        padding: 20px 10px;
        display: flex;
        justify-content: center;
        flex: 1;
        /* Distribute space evenly */
    }

    .plan-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .icon-circle {
        width: 75px;
        height: 75px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        border: 1px solid #eee;
        padding: 10px;
    }

    .plan-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .plan-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        /* Tight gap between price and button */
    }

    .plan-info h6 {
        font-size: 12px;
        font-weight: 800;
        margin-bottom: 0;
        /* Removed bottom margin for better alignment */
        color: #1b2e1b;
        font-family: 'DM Sans', sans-serif;
    }

    .btn-join-now {
        background: linear-gradient(135deg, #689f38, #5aab2a) !important;
        color: #ffffff !important;
        height: 38px;
        /* Compact height for strip */
        padding: 0 20px !important;
        font-size: 12px;
        /* Smaller font for strip buttons */
        font-weight: 700;
        border-radius: 12px;
        text-transform: uppercase;
        transition: all 0.3s ease;
        border: none;
        display: inline-flex;
        /* Changed to inline-flex for vertical centering */
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        box-shadow: 0 6px 15px rgba(104, 159, 56, 0.2);
        white-space: nowrap;
    }

    .btn-join-now:hover {
        background-color: #558b2f !important;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(104, 159, 56, 0.3);
    }

    @media (max-width: 1200px) {
        .plans-strip-section {
            margin-top: -60px;
        }
    }

    @media (max-width: 991px) {
        .plans-strip-section {
            margin-top: 30px;
            padding: 0 20px 40px;
        }

        .plan-item {
            border-right: none !important;
            border-bottom: 1px solid #f5f5f5;
            padding: 25px;
        }
    }

    .search-tab-content {
        background: #fff;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
        border: 1px solid #f0f0f0;
    }

    .search-result-title {
        font-family: 'Playfair Display', serif;
        font-size: 28px;
        font-weight: 700;
        color: #1b2e1b;
        margin-bottom: 30px;
        border-left: 5px solid #689f38;
        padding-left: 20px;
    }

    /* Hero Forms Responsiveness */
    @media (max-width: 1400px) {
        .hero-forms-wrapper {
            right: 40px;
            gap: 15px;
        }

        .register-form,
        .login-banner-form {
            width: 100%;
            max-width: 380px;
            flex: 1 1 auto;
        }
    }

    @media (max-width: 1200px) {
        .hero-section {
            height: auto;
            min-height: 100vh;
            padding-bottom: 50px;
        }

        .hero-forms-wrapper {
            position: relative;
            right: auto;
            top: auto;
            transform: none;
            margin: 50px auto 0;
            justify-content: center;
            flex-wrap: wrap;
        }

        .hero-text-container {
            position: relative;
            left: auto;
            top: auto;
            transform: none;
            margin: 120px auto 0;
            text-align: center;
            max-width: 800px;
            padding: 0 20px;
        }
    }

    @media (max-width: 768px) {
        .hero-forms-wrapper {
            flex-direction: column;
            align-items: center;
        }

        .register-form,
        .login-banner-form {
            width: 100%;
            max-width: 380px;
        }
    }

    @media (max-width: 768px) {

        /* Global Section Paddings */
        section,
        .feature-section,
        .plans-section,
        .about-section,
        .mobile-app-section {
            padding: 50px 20px !important;
        }

        h1 {
            font-size: 30px !important;
        }

        h2 {
            font-size: 26px !important;
        }

        /* Hero Banner Section Mobile */
        .hero-section {
            min-height: 85vh !important;
            padding: 40px 0 !important;
            position: relative !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: flex-start !important;
            background: none !important;
        }

        .backgroundimg {
            display: block !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background-size: cover !important;
            background-position: center top !important;
            z-index: 1 !important;
            background-image: url('../image/WhatsApp Image 2026-03-03 at 10.45.50 PM.jpeg') !important;
        }

        .hero-overlay {
            display: block !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: rgba(0, 0, 0, 0.6) !important;
            z-index: 2 !important;
        }

        .hero-text-container {
            position: relative !important;
            z-index: 10 !important;
            color: white !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            text-align: center !important;
            margin-top: 20px !important;
            margin-bottom: 30px !important;
        }

        .hero-text-container h1 {
            color: white !important;
            font-size: 28px !important;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
        }

        .hero-text-container p {
            color: rgba(255, 255, 255, 0.9) !important;
            font-size: 14px !important;
            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5) !important;
        }

        .hero-forms-wrapper {
            position: relative !important;
            z-index: 10 !important;
            padding: 0 15px !important;
            width: 100% !important;
            max-width: 450px !important;
            margin: 0 auto !important;
            gap: 20px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
        }

        .register-form,
        .login-banner-form {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px) !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
            width: 100% !important;
            max-width: 100% !important;
            padding: 20px !important;
            border-radius: 16px !important;
        }

        /* Navbar Customization */
        .navbar-collapse {
            background: white !important;
            padding: 15px !important;
            border-radius: 12px !important;
            margin-top: 10px !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
        }

        .nav-link {
            padding: 10px 15px !important;
            border-bottom: 1px solid #f8f8f8 !important;
        }

        /* Membership Plans vertically on mobile */
        .plans-flex-row {
            flex-direction: column !important;
            padding: 0 10px !important;
            gap: 20px !important;
            display: flex !important;
            align-items: center !important;
        }

        .plan-item {
            width: 100% !important;
            max-width: 400px !important;
            border-right: none !important;
            border: 1px solid #f0f0f0 !important;
            border-radius: 20px !important;
            padding: 20px !important;
            background: white !important;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05) !important;
            margin-bottom: 10px !important;
        }

        .plan-content {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
            gap: 15px !important;
        }

        .icon-circle {
            width: 70px !important;
            height: 70px !important;
            margin: 0 auto !important;
        }

        .plan-info {
            width: 100% !important;
            text-align: center !important;
        }

        .plan-info h6 {
            font-size: 14px !important;
            margin-bottom: 10px !important;
        }

        .btn-join-now {
            width: 100% !important;
            max-width: 200px !important;
            margin: 0 auto !important;
            display: flex !important;
        }

        /* FIX: About Section Checklist Alignment - STARTING ON SAME LINE */
        .features-list {
            display: flex !important;
            justify-content: center !important;
            width: 100% !important;
            margin-top: 25px !important;
        }

        .features-list ul {
            display: block !important;
            text-align: left !important;
            padding: 0 !important;
            margin: 0 !important;
            width: fit-content !important;
            border: none !important;
        }

        .features-list li {
            justify-content: flex-start !important;
            width: 100% !important;
            font-size: 16px !important;
            margin-bottom: 15px !important;
        }

        /* Footer Mobile Responsiveness */
        .footer {
            padding: 40px 0 !important;
            text-align: center !important;
        }

        .footer-container {
            flex-direction: column !important;
            align-items: center !important;
        }

        .footer-box {
            width: 100% !important;
            padding-left: 0 !important;
            margin-bottom: 40px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
        }

        .footer-heading {
            margin-left: auto !important;
            margin-right: auto !important;
            width: fit-content !important;
        }

        .footer-heading::after {
            left: 50% !important;
            transform: translateX(-50%) !important;
        }

        .social-icons {
            justify-content: center !important;
        }

        .contact-details {
            display: inline-block !important;
            text-align: left !important;
        }

        .copyright-text {
            text-align: center !important;
            margin-top: 10px !important;
        }

        .footer-logo {
            margin-left: auto !important;
            margin-right: auto !important;
            display: block !important;
        }

        /* About Us Page Banner Fixes */
        .about-us-banner {
            height: 60vh !important;
            min-height: 450px !important;
            background-position: right !important;
        }

        .about-us-banner::before {
            background: rgba(0, 0, 0, 0.5) !important;
            /* Unified dark overlay */
        }

        .about-us-banner .aboutus-child {
            position: relative !important;
            left: 0 !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            max-width: 100% !important;
            padding: 0 20px !important;
            text-align: center !important;
            height: auto !important;
        }

        .about-us-heading {
            margin-left: 0 !important;
            max-width: 100% !important;
        }

        .about-us-heading h1 {
            font-size: 32px !important;
            margin-bottom: 15px !important;
        }

        .about-us-heading p {
            font-size: 16px !important;
            width: 100% !important;
        }

        /* Other About Sections */
        .mission-section-main, .why-choose-us-main {
            text-align: center !important;
            padding: 50px 20px !important;
        }
        .why-choose-us-section, .aboutus-mission-section {
            padding-left: 0 !important;
            margin: 0 auto !important;
            max-width: 100% !important;
            text-align: center !important;
        }
        .why-choose-us-section h2, .aboutus-mission-section h2 {
            text-align: center !important;
            width: 100% !important;
            margin-bottom: 25px !important;
        }
        .mission-section-image img, .why-choose-us-image img {
            max-width: 100% !important;
            height: auto !important;
            margin-bottom: 30px !important;
        }
        .why-choose-us-list {
            display: flex !important;
            justify-content: center !important;
            width: 100% !important;
        }
        .why-choose-us-list ul {
            display: block !important;
            text-align: left !important;
            width: fit-content !important;
            margin: 0 auto !important;
            padding: 0 !important;
        }
        .why-choose-us-list ul li {
            justify-content: flex-start !important;
            font-size: 16px !important;
            margin-bottom: 12px !important;
        }
        .about-stats-box {
            margin-bottom: 20px !important;
        }

        /* Other Sections Support */
        .plan-container {
            flex-direction: column !important;
            align-items: center !important;
        }

        .plan-card {
            width: 100% !important;
            max-width: 350px !important;
        }

        .app-inner .row {
            flex-direction: column-reverse !important;
            text-align: center !important;
        }

        .stats-row {
            justify-content: center !important;
            gap: 15px !important;
        }
    }
}