<section className="personal__information pt__60 pb__60">
<div className="container">
<div className="row justify-content-center">
<div className="col-xxl-4 col-xl-4 col-lg-4">
<div className="personal__infotabs">
<ul className="nav">
<li className="nav-item">
<Link href="/personal-information.html" className="nav-link active">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Personal Information
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/login-security.html" className="nav-link">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Login and security
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/favourites.html" className="nav-link">
<span className="icon">
<img src="/img/svg/badge.svg" alt="login"/>
</span>
<span>
Favourites
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/debit-creadit.html" className="nav-link">
<span className="icon">
<img src="/img/svg/creadits.svg" alt="login"/>
</span>
<span>
Credit or Debit Cards
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/transaction.html" className="nav-link">
<span className="icon">
<img src="/img/svg/file-transfer.svg" alt="login"/>
</span>
<span>
Transaction
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/password-change.html" className="nav-link">
<span className="icon">
<img src="/img/svg/password-change.svg" alt="login"/>
</span>
<span>
Change Password
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/notification.html" className="nav-link">
<span className="icon">
<img src="/img/svg/notifications.svg" alt="login"/>
</span>
<span>
Notifications
</span>
</Link>
</li>
</ul>
</div>
</div>
<div className="col-xxl-6 col-xl-6 col-lg-8">
<div className="personal__infobody">
<div className="personal__info__box">
<div className="per__ittle d-flex align-items-center">
<h5>
Personal information
</h5>
<Link href="/javascript:void(0)" className="edit d-flex align-items-center gap-2">
<span className="icon">
<img src="/img/svg/edits.svg" alt="img"/>
</span>
<span className="fz-18 fw-600">
Edit
</span>
</Link>
</div>
<ul className="personal__details__name">
<li>
<span className="namebold fz-18 fw-600">
Name
</span>
<span>
Leslie Alexander
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Date of Birth
</span>
<span>
12/07/1993
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Account Status
</span>
<span className="actbe">
Active
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Email
</span>
<span>
example.example@gamil.com
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Mobile
</span>
<span>
(205) 555-0100
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Country
</span>
<span>
US
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Address
</span>
<span>
3605 Perker Rd.
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Customer Service ID
</span>
<span>
cust_FXFlIvl8h1TA7o
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="personal__information pt__60 pb__60">
<div className="container">
<div className="row justify-content-center">
<div className="col-xxl-4 col-xl-4 col-lg-4">
<div className="personal__infotabs">
<ul className="nav">
<li className="nav-item">
<Link href="/personal-information.html" className="nav-link">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Personal Information
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/login-security.html" className="nav-link active">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Login and security
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/favourites.html" className="nav-link">
<span className="icon">
<img src="/img/svg/badge.svg" alt="login"/>
</span>
<span>
Favourites
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/debit-creadit.html" className="nav-link">
<span className="icon">
<img src="/img/svg/creadits.svg" alt="login"/>
</span>
<span>
Credit or Debit Cards
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/transaction.html" className="nav-link">
<span className="icon">
<img src="/img/svg/file-transfer.svg" alt="login"/>
</span>
<span>
Transaction
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/password-change.html" className="nav-link">
<span className="icon">
<img src="/img/svg/password-change.svg" alt="login"/>
</span>
<span>
Change Password
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/notification.html" className="nav-link">
<span className="icon">
<img src="/img/svg/notifications.svg" alt="login"/>
</span>
<span>
Notifications
</span>
</Link>
</li>
</ul>
</div>
</div>
<div className="col-xxl-6 col-xl-6 col-lg-6">
<div className="personal__infobody">
<div className="personal__info__box">
<div className="per__ittle d-flex align-items-center">
<h5>
Login and security
</h5>
<Link href="/javascript:void(0)" className="edit d-flex align-items-center gap-2">
<span className="icon">
<img src="/img/svg/edits.svg" alt="img"/>
</span>
<span className="fz-18 fw-600">
Edit
</span>
</Link>
</div>
<ul className="personal__details__name">
<li>
<span className="namebold fz-18 fw-600">
Language
</span>
<span>
English (United States)
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Time Zone
</span>
<span>
(GMT-06:00) US
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Password
</span>
<span className="actbe">
********
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
2-step verification
</span>
<span>
Add an extra layer of security to your account by using a one-time security code in addition to your password each time you log in. <Link href="/javascript:void(0)">Setup</Link>
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Stay logged in for faster purcheses
</span>
<span>
Add an extra layer of security to your account by using a one-time security code in addition to your password each time you log in. Update
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Security qustion
</span>
<span className="actbe">
********
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Address
</span>
<span>
3605 Perker Rd.
</span>
</li>
<li>
<span className="namebold fz-18 fw-600">
Account type
</span>
<span>
Business
</span>
</li>
</ul>
<Link href="/javascript:void(0)" className="closeaccount d-flex align-items-center">
<span className="icon">
<i className="material-symbols-outlined">
close
</i>
</span>
<span className="fz-18 fw-600">
Close Account
</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</section>
Oparetor | Transaction | Number | Purchase | Edit |
---|---|---|---|---|
![]() | Mobile Recharge | (406) 555-0120 | Recharge Now | |
![]() | Electric Bill | 4600 | Payment | |
![]() | Gas Bill | 8829 | Payment | |
![]() | Flight Booking | 9151 | Payment |
<section className="personal__information pt__60 pb__60">
<div className="container">
<div className="row justify-content-center">
<div className="col-xxl-4 col-xl-4 col-lg-4">
<div className="personal__infotabs">
<ul className="nav">
<li className="nav-item">
<Link href="/personal-information.html" className="nav-link">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Personal Information
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/login-security.html" className="nav-link">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Login and security
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/favourites.html" className="nav-link active">
<span className="icon">
<img src="/img/svg/badge.svg" alt="login"/>
</span>
<span>
Favourites
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/debit-creadit.html" className="nav-link">
<span className="icon">
<img src="/img/svg/creadits.svg" alt="login"/>
</span>
<span>
Credit or Debit Cards
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/transaction.html" className="nav-link">
<span className="icon">
<img src="/img/svg/file-transfer.svg" alt="login"/>
</span>
<span>
Transaction
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/password-change.html" className="nav-link">
<span className="icon">
<img src="/img/svg/password-change.svg" alt="login"/>
</span>
<span>
Change Password
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/notification.html" className="nav-link">
<span className="icon">
<img src="/img/svg/notifications.svg" alt="login"/>
</span>
<span>
Notifications
</span>
</Link>
</li>
</ul>
</div>
</div>
<div className="col-xxl-8 col-xl-8 col-lg-8">
<div className="personal__favorites">
<div className="personal__info__box">
<div className="per__ittle d-flex align-items-center">
<h5>
Your Saved Connections
</h5>
</div>
<div className="table__system">
<table className="table1">
<thead>
<tr>
<th>Oparetor</th>
<th>Transaction</th>
<th>Number</th>
<th>Purchase</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span className="oparetor">
<img src="/img/payment/verizon.png" alt="img"/>
</span>
</td>
<td>Mobile Recharge</td>
<td>(406) 555-0120</td>
<td>
<Link href="/payment.html" className="purchase">
<span>
Recharge Now
</span>
</Link>
</td>
<td>
<Link href="/javascript:void(0)" className="edit">
<img src="/img/svg/edits.svg" alt="img"/>
</Link>
</td>
</tr>
<tr>
<td>
<span className="oparetor">
<img src="/img/payment/met.png" alt="img"/>
</span>
</td>
<td>Electric Bill</td>
<td>4600</td>
<td>
<Link href="/payment.html" className="purchase">
<span>
Payment
</span>
</Link>
</td>
<td>
<Link href="/javascript:void(0)" className="edit">
<img src="/img/svg/edits.svg" alt="img"/>
</Link>
</td>
</tr>
<tr>
<td>
<span className="oparetor">
<img src="/img/payment/sprint.png" alt="img"/>
</span>
</td>
<td>Gas Bill</td>
<td>8829</td>
<td>
<Link href="/payment.html" className="purchase">
<span>
Payment
</span>
</Link>
</td>
<td>
<Link href="/javascript:void(0)" className="edit">
<img src="/img/svg/edits.svg" alt="img"/>
</Link>
</td>
</tr>
<tr>
<td>
<span className="oparetor">
<img src="/img/payment/ata5g.png" alt="img"/>
</span>
</td>
<td>Flight Booking</td>
<td>9151</td>
<td>
<Link href="/payment.html" className="purchase">
<span>
Payment
</span>
</Link>
</td>
<td>
<Link href="/javascript:void(0)" className="edit">
<img src="/img/svg/edits.svg" alt="img"/>
</Link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="personal__information pt__60 pb__60">
<div className="container">
<div className="row justify-content-center">
<div className="col-xxl-4 col-xl-4 col-lg-4">
<div className="personal__infotabs">
<ul className="nav">
<li className="nav-item">
<Link href="/personal-information.html" className="nav-link">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Personal Information
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/login-security.html" className="nav-link">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Login and security
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/favourites.html" className="nav-link">
<span className="icon">
<img src="/img/svg/badge.svg" alt="login"/>
</span>
<span>
Favourites
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/debit-creadit.html" className="nav-link active">
<span className="icon">
<img src="/img/svg/creadits.svg" alt="login"/>
</span>
<span>
Credit or Debit Cards
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/transaction.html" className="nav-link">
<span className="icon">
<img src="/img/svg/file-transfer.svg" alt="login"/>
</span>
<span>
Transaction
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/password-change.html" className="nav-link">
<span className="icon">
<img src="/img/svg/password-change.svg" alt="login"/>
</span>
<span>
Change Password
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/notification.html" className="nav-link">
<span className="icon">
<img src="/img/svg/notifications.svg" alt="login"/>
</span>
<span>
Notifications
</span>
</Link>
</li>
</ul>
</div>
</div>
<div className="col-xxl-7 col-xl-7 col-lg-7">
<div className="personal__infobody">
<div className="personal__info__box">
<div className="per__ittle border__bottom pb__20 d-flex align-items-center">
<h5>
Credit or Debit Cards
</h5>
<Link href="/javascript:void(0)" className="edit d-flex align-items-center gap-2">
<span className="icon delete">
<i className="material-symbols-outlined">
delete
</i>
</span>
<span className="fz-18 fw-600">
Delete Card
</span>
</Link>
</div>
<div className="debit__creadit d-flex align-items-center">
<div className="card__box">
<img src="/img/payment/cr3.png" alt="img"/>
</div>
<div className="card__box">
<img src="/img/payment/cr1.png" alt="img"/>
</div>
<div className="card__box">
<img src="/img/payment/cr2.png" alt="img"/>
</div>
<Link href="/javascript:void(0)" className="card__boxed">
<img src="/img/payment/payplus.png" alt="img"/>
<span>
Add New Card
</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="personal__information pt__60 pb__60">
<div className="container">
<div className="row justify-content-center">
<div className="col-xxl-4 col-xl-4 col-lg-4">
<div className="personal__infotabs">
<ul className="nav">
<li className="nav-item">
<Link href="/personal-information.html" className="nav-link">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Personal Information
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/login-security.html" className="nav-link">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Login and security
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/favourites.html" className="nav-link">
<span className="icon">
<img src="/img/svg/badge.svg" alt="login"/>
</span>
<span>
Favourites
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/debit-creadit.html" className="nav-link">
<span className="icon">
<img src="/img/svg/creadits.svg" alt="login"/>
</span>
<span>
Credit or Debit Cards
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/transaction.html" className="nav-link active">
<span className="icon">
<img src="/img/svg/file-transfer.svg" alt="login"/>
</span>
<span>
Transaction
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/password-change.html" className="nav-link">
<span className="icon">
<img src="/img/svg/password-change.svg" alt="login"/>
</span>
<span>
Change Password
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/notification.html" className="nav-link">
<span className="icon">
<img src="/img/svg/notifications.svg" alt="login"/>
</span>
<span>
Notifications
</span>
</Link>
</li>
</ul>
</div>
</div>
<div className="col-xxl-8 col-xl-8 col-lg-8">
<div className="personal__favorites">
<div className="personal__info__box">
<div className="per__ittle d-flex align-items-center">
<h5>
All History
</h5>
<Link href="/javascript:void(0)" className="edit d-flex align-items-center gap-2">
<span className="icon delete">
<i className="material-symbols-outlined">
delete
</i>
</span>
<span className="fz-18 fw-600">
Clear Data
</span>
</Link>
</div>
<div className="calender__date">
<input type="text"id="datepicker" placeholder="01/01/2022 - 01/06/2023"/>
<i className="material-symbols-outlined">
calendar_month
</i>
</div>
<div className="table__system pb__24">
<table className="table1">
<thead>
<tr>
<th>Date</th>
<th>Transaction</th>
<th>Amount</th>
<th>Fee</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>01 Jan</td>
<td>Mobile Recharge</td>
<td>$750.00</td>
<td>-$50.00</td>
<td>
<Link href="/javascript:void(0)" className="edi">
<img src="/img/payment/g-check.png" alt="img"/>
</Link>
</td>
</tr>
<tr>
<td>27 Jan</td>
<td>Electric Bill</td>
<td>$320.00</td>
<td>-$15.00</td>
<td>
<Link href="/javascript:void(0)" className="edi">
<img src="/img/payment/g-cross.png" alt="img"/>
</Link>
</td>
</tr>
<tr>
<td>24 Feb</td>
<td>Cable TV Bill</td>
<td>$410.00</td>
<td>-$30.00</td>
<td>
<Link href="/javascript:void(0)" className="edi">
<img src="/img/payment/g-check.png" alt="img"/>
</Link>
</td>
</tr>
<tr>
<td>7 Mar</td>
<td>Flight Booking</td>
<td>$777.00</td>
<td>-$20.00</td>
<td>
<Link href="/javascript:void(0)" className="edi">
<img src="/img/payment/g-check.png" alt="img"/>
</Link>
</td>
</tr>
<tr>
<td>27 Apr</td>
<td>Gas Bill</td>
<td>$450.00</td>
<td>-$5.00</td>
<td>
<Link href="/javascript:void(0)" className="edi">
<img src="/img/payment/g-cross.png" alt="img"/>
</Link>
</td>
</tr>
<tr>
<td>01 Jun</td>
<td>Flight Booking</td>
<td>$440.00</td>
<td>-$10.00</td>
<td>
<Link href="/javascript:void(0)" className="edi">
<img src="/img/payment/g-worning.png" alt="img"/>
</Link>
</td>
</tr>
</tbody>
</table>
</div>
<ul className="pagination justify-content-end">
<li>
<Link href="/#">
<span className="icon">
<i className="material-symbols-outlined">
chevron_left
</i>
</span>
</Link>
</li>
<li>
<Link href="/#">
1
</Link>
</li>
<li>
<Link href="/#">
2
</Link>
</li>
<li>
<Link href="/#">
3
</Link>
</li>
<li>
<Link href="/#">
...
</Link>
</li>
<li>
<Link href="/#">
30
</Link>
</li>
<li>
<Link href="/#">
<span className="icon">
<i className="material-symbols-outlined">
chevron_right
</i>
</span>
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="personal__information pt__60 pb__60">
<div className="container">
<div className="row justify-content-center">
<div className="col-xxl-4 col-xl-4 col-lg-4">
<div className="personal__infotabs">
<ul className="nav">
<li className="nav-item">
<Link href="/personal-information.html" className="nav-link">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Personal Information
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/login-security.html" className="nav-link">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Login and security
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/favourites.html" className="nav-link">
<span className="icon">
<img src="/img/svg/badge.svg" alt="login"/>
</span>
<span>
Favourites
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/debit-creadit.html" className="nav-link">
<span className="icon">
<img src="/img/svg/creadits.svg" alt="login"/>
</span>
<span>
Credit or Debit Cards
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/transaction.html" className="nav-link">
<span className="icon">
<img src="/img/svg/file-transfer.svg" alt="login"/>
</span>
<span>
Transaction
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/password-change.html" className="nav-link active">
<span className="icon">
<img src="/img/svg/password-change.svg" alt="login"/>
</span>
<span>
Change Password
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/notification.html" className="nav-link">
<span className="icon">
<img src="/img/svg/notifications.svg" alt="login"/>
</span>
<span>
Notifications
</span>
</Link>
</li>
</ul>
</div>
</div>
<div className="col-xxl-6 col-xl-6 col-lg-6">
<div className="personal__favorit">
<div className="personal__info__boxtwo">
<div className="per__ittle d-flex align-items-center">
<h5>
Change Password
</h5>
</div>
<form action="javacript:void(0)" className="change__password">
<div className="form__grp mb__20">
<label htmlFor="present">Present Password</label>
<input type="text" id="present" placeholder="Present Password"/>
</div>
<div className="form__grp mb__20">
<label htmlFor="new">New Password</label>
<input type="text" id="new" placeholder="New Password"/>
</div>
<div className="form__grp mb__40">
<label htmlFor="confirm">Confirm Password</label>
<input type="text" id="confirm" placeholder="Confirm Password"/>
</div>
<div className="form__grp">
<button type="submit" className="cmn__btn">
<span>
Update Password
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="personal__information pt__60 pb__60">
<div className="container">
<div className="row justify-content-center">
<div className="col-xxl-4 col-xl-4 col-lg-4">
<div className="personal__infotabs">
<ul className="nav">
<li className="nav-item">
<Link href="/personal-information.html" className="nav-link">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Personal Information
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/login-security.html" className="nav-link">
<span className="icon">
<img src="/img/svg/log.svg" alt="login"/>
</span>
<span>
Login and security
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/favourites.html" className="nav-link">
<span className="icon">
<img src="/img/svg/badge.svg" alt="login"/>
</span>
<span>
Favourites
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/debit-creadit.html" className="nav-link">
<span className="icon">
<img src="/img/svg/creadits.svg" alt="login"/>
</span>
<span>
Credit or Debit Cards
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/transaction.html" className="nav-link">
<span className="icon">
<img src="/img/svg/file-transfer.svg" alt="login"/>
</span>
<span>
Transaction
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/password-change.html" className="nav-link">
<span className="icon">
<img src="/img/svg/password-change.svg" alt="login"/>
</span>
<span>
Change Password
</span>
</Link>
</li>
<li className="nav-item">
<Link href="/notification.html" className="nav-link active">
<span className="icon">
<img src="/img/svg/notifications.svg" alt="login"/>
</span>
<span>
Notifications
</span>
</Link>
</li>
</ul>
</div>
</div>
<div className="col-xxl-6 col-xl-6 col-lg-6">
<div className="personal__favorit">
<div className="personal__info__boxtwo">
<div className="per__ittle d-flex align-items-center">
<h5>
Notifications
</h5>
</div>
<div className="notification__body mb__40">
<div className="notification__item">
<input className="form-check-input" type="checkbox" id="checkon1" checked/>
<label className="form-check-label" htmlFor="checkon1">
<span className="announce fz-18 fw-600">
Announcements
</span>
<span className="pragrah fz-16 fw-400">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</span>
</label>
</div>
<div className="notification__item">
<input className="form-check-input" type="checkbox" id="checkof1"/>
<label className="form-check-label" htmlFor="checkof1">
<span className="announce fz-18 fw-600">
Mobile Recharge
</span>
<span className="pragrah fz-16 fw-400">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</span>
</label>
</div>
<div className="notification__item">
<input className="form-check-input" type="checkbox" id="checkon2" checked/>
<label className="form-check-label" htmlFor="checkon2">
<span className="announce fz-18 fw-600">
Bill Payment
</span>
<span className="pragrah fz-16 fw-400">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</span>
</label>
</div>
<div className="notification__item">
<input className="form-check-input" type="checkbox" id="checkof2"/>
<label className="form-check-label" htmlFor="checkof2">
<span className="announce fz-18 fw-600">
Booking
</span>
<span className="pragrah fz-16 fw-400">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</span>
</label>
</div>
<div className="notification__item">
<input className="form-check-input" type="checkbox" id="checkon3" checked/>
<label className="form-check-label" htmlFor="checkon3">
<span className="announce fz-18 fw-600">
Have a problem with a payment
</span>
<span className="pragrah fz-16 fw-400">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</span>
</label>
</div>
<div className="notification__item">
<input className="form-check-input" type="checkbox" id="checkof3"/>
<label className="form-check-label" htmlFor="checkof3">
<span className="announce fz-18 fw-600">
Special Offers
</span>
<span className="pragrah fz-16 fw-400">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</span>
</label>
</div>
<div className="notification__item">
<input className="form-check-input" type="checkbox" id="checkon4" checked/>
<label className="form-check-label" htmlFor="checkon4">
<span className="announce fz-18 fw-600">
Reviews
</span>
<span className="pragrah fz-16 fw-400">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</span>
</label>
</div>
</div>
<Link href="/javascript:void(0)" className="cmn__btn">
<span>
Save Change
</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</section>