.head-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 35px 35px 20px 35px;
    }

    .header-section {
        text-align: center;
    }

    .header-title {
        color: #3a3a49;
        font-size: 1.75rem;
        font-weight: 600;
        text-align: left;
        margin: 0;
    }

    .header-subtitle {
        color: #3a3a49;
        font-size: 0.875rem;
        margin: 0;
    }

    .add-reminder-section {

        transition: all 0.3s ease;
    }

    .add-reminder-section:hover {
        transform: translateY(-1px);
    }

    .add-reminder {
        color: white;
        font-size: 0.875rem;
        background-color: #6143e4;
        padding: 12px 16px;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.3s ease;
        text-decoration: none;
        display: flex;
    }

    .add-reminder:hover {
        color: white;
        text-decoration: none;
    }

    .content-wrapper {
        margin: 0 35px 35px 35px;
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        border: 1px solid #e2e3e5;
        /* scrollbar-width: auto;
        scrollbar-color: #888 #f1f1f1;
        max-height: 78vh;
        overflow-y: scroll; */
    }

    .otp-section {
        background: white;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
    }

    .icon-large {
        font-size: 3.75rem;
        color: #6143e4;
    }

    .primary-text {
        font-size: 1.25rem;
        font-weight: 600;
        color: #3a3a49;
    }

    .secondary-text {
        font-size: 0.875rem;
        color: #69696e;
    }

    .otp-section .send-otp #onPageEmailVerificationForm {
        display: flex;
        align-items: center;
    }

    .otp-section .send-otp #onPageEmailVerificationForm .btn {
        white-space: nowrap;
        padding: 10px 20px;
    }

    .postcode-container {
        position: relative;
        margin-right: 10px;
    }

    .send-otp,
    .verification {
        display: flex;
        /* Flex container */
        align-items: center;
        /* Vertically center items (optional) */
        gap: 10px;
        /* Add a gap between the child elements (adjust as needed) */
        margin-bottom: 20px;
    }

    .email-input,
    .postcode-input {
        flex-grow: 1;
        margin-right: 10px;
        font-size: 0.875rem;
        color: #3a3a49;
        border-radius: 6px;
        padding: 10px;
        border: 1px solid #ccc;
        /* Ensure the input takes full width */
    }

    .postcode-input {
        width: 100%;
    }

    .email-input:focus,
    .postcode-input:focus {
        border-color: #6143e4;
        box-shadow: 0 0 3px rgba(97, 67, 228, 0.5);
        outline: none;
    }

    .btn.sendBtn,
    .btn.verifyBtn {
        font-size: 0.875rem;
        font-weight: 600;
        background-color: #6143e4;
        border: none;
        color: white;
        padding: 10px 20px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        min-width: 120px;
        text-align: center;
    }

    .btn.sendBtn:hover,
    .btn.verifyBtn:hover {
        color: white;
        transform: translateY(-2px);
        background-color: #6143e4;
        /* Darker blue on hover */
    }

    .verifyBtn.btn.btn-success {
        background-color: #6143e4 !important;

    }


    #reminderListWrapper .card.mb-4:last-child {
        margin-bottom: 0 !important;
    }

    .card-body:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        border: none;
    }

    .card {
        border-radius: 10px !important;
        box-shadow: none !important;
        border: none !important;
    }

    .card-body {
        padding: 20px;
        border-radius: 10px;
        background-color: #F8F9FA;
        border: 1px solid #E2E3E5;
        box-shadow: none;
    }

    .make-model {
        font-size: 1.25rem;
        font-weight: 600;

    }

    .text-muted.d-block {
        font-size: 0.875rem;
        color: #69696e;
    }

    .match-badge {
        background: var(--primary-color);
        color: #3a3a49;
        padding: 6px 12px;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .btn.btn-outline-secondary {
        background-color: #6143e4;
        color: white;
        font-size: 0.875rem;
        font-weight: 600;
        border-radius: 6px;
        border: none;
    }

    .btn.btn-outline-secondary:hover {
        color: white;
        transform: translateY(-2px);
        background-color: #6143e4;
    }

    .btn.btn-outline-secondary:focus,
    .btn.btn-outline-secondary:active,
    .btn.btn-outline-secondary:visited,
    .btn.btn-primary,
    .btn.btn-primary:visited,
    .btn.btn-primary:focus,
    .btn.btn-primary:active {
        background-color: #6143e4 !important;
        box-shadow: none !important;
        outline: none !important;
        text-decoration: none;
        color: white;
    }


    .btn.btn-primary {
        background-color: #6143e4;
        font-size: 0.875rem;
        font-weight: 600;
        border: none;
        padding: 12px 16px;
        border-radius: 6px;
        text-decoration: none;
    }

    .btn.btn-primary:hover {
        color: white;
        transform: translateY(-2px);
        background-color: #6143e4;
        text-decoration: none;
    }


    @media (max-width: 1023px) {}

    /* Mobile: 767px and below */
    @media (max-width: 767px) {
        .otp-section .send-otp #onPageEmailVerificationForm {
            flex-direction: column;
        }

        .otp-section .send-otp #onPageEmailVerificationForm .btn {
            width: 100%;
        }

        .email-input,
        .postcode-input,
        .postcode-container {
            margin: 0;
            margin-bottom: 10px;
            width: 100%;
        }

        .head-wrapper {
            flex-direction: column;
            align-items: start;
            text-align: start;
            margin: 15px 15px 20px 15px;
        }


        .add-reminder-section {
            width: 100%;
            margin-top: 20px;
        }

        .add-reminder {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .add-reminder span {
            flex-grow: 1;
        }

        .content-wrapper {
            margin: 0 15px 15px 15px;
            /* Adjust margins for mobile */
        }

        .send-otp,
        .verification {
            flex-direction: column;
        }

        .btn.sendBtn,
        .btn.verifyBtn {
            width: 100%;
        }

    }