/* OASIPAY 

/************ TABLE OF CONTENTS ***************
1.  Fonts
2.  Reset
3.  Global Settings
4.  Main Header 
5.  Main Footer 
6.  Home page
7.  Make a Payment Page
8.  Generate seller code Page
9.  Pay without code Page 
11. Receive a Payment Page
12. Contact Us Page
14. Tell Us Page 
15. Confirm Transaction Page 
16. Cancel Transaction Page
19. If You Pay Page
20. FAQ Page 
21, Monitoring Transaction Page
18. FAQ's Section
23. Work Section
22. Tracking Section
22. Why Choose Us 
22. Skills Section
22. News Section
24. Map Section
25. Clients Section
26. Main Footer
**********************************************/

/*--- Fonts ---*/

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/*--- Reset ---*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

/*--- Global Settings ---*/

html {
  scroll-behavior: smooth;
}

/* Define root variables for consistency */
:root {
  --primary-color: #235a86; /* Primary color */
  --light-blue: #25a7e4; /* Light blue color */
  --font-family: "Open Sans", sans-serif; /* Font family */
  --title-font-size: clamp(2.2rem, 2.5vw, 3.31rem); /* Font size for titles */
  --paragraph-font-size: 20px; /* Font size for paragraphs */
  --underlined-text-font-size: 10px; /* Font size for underlined text */
  --paragraph-text-color: rgb(85, 85, 85); /* Text color for paragraphs */
  --white-color: #fff; /* White color */
  --border: 1px solid #ececec;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* Styling for headings (h1, h2, h3) */
h1,
h2,
h3 {
  font-size: var(--title-font-size);
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 10px;
}

/* Styling for paragraphs */
p {
  font-size: var(--paragraph-font-size);
  color: var(--primary-color);
  font-weight: 400;
  margin-bottom: 15px;
}

label {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--primary-color);
}

input {
  height: 27px;
  border: 1px solid #ececec;
  background-color: #fff;
  margin-bottom: 10px;
  padding-left: 5px;
  font-size: 12px;
  width: 100%;
  border-radius: 3px;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: #d3d3d3; /* Light gray */
  color: #808080; /* Gray text */
  cursor: not-allowed;
}

input:focus,
textarea:focus {
  outline: none;
}

input::placeholder {
  color: #e4e4e4;
  font-size: 12px;
  font-weight: 600;

  text-align: center;
}

textarea {
  border: 1px solid #ececec;
  padding-left: 5px;
  font-size: 12px;
  margin-bottom: 10px;
}

textarea::placeholder {
  color: #e4e4e4;
  font-size: 12px;
  font-weight: 600;
  padding-top: 50px;
  padding-left: 29%;
}

/* Styling for buttons */

.btn {
  line-height: 3px;
  width: 160px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 700; /* Text set to bold */
  text-decoration: none; /* Remove underline */
  border: 2px solid var(--light-blue) !important; /* Added border color and width */
  height: 35px !important;
  text-transform: uppercase !important;
  padding: 0 10px;
  padding-left: 0px;
  background-color: transparent;
  color: var(--primary-color); /* Default text color is black */
  cursor: pointer;
  border-radius: 20px; /* Rounded edges */
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
  position: relative; /* Needed to position the dot */
}

.btn::before {
  content: "❯"; /* Bolder ">" Unicode character symbol */
  font-size: 15px; /* Adjust size of the symbol */
  color: white; /* Set symbol color to white */
  width: 24px; /* Dot size */
  height: 24px; /* Dot size */
  background-color: var(--light-blue); /* Dot color */
  border-radius: 50%; /* Make it circular */
  position: absolute;
  right: 3px;
  top: 51%;
  transform: translateY(-50%) translateX(-2px); /* Adjust horizontal and vertical position */
  display: flex;
  justify-content: center; /* Center symbol horizontally */
  align-items: center; /* Center symbol vertically */
}

/* Hover effect */
.btn:hover {
  background-color: var(--light-blue) !important;
  color: white !important; /* Change text color to white on hover */
}

.btn:hover::before {
  background-color: white; /* Change dot to white on hover */
  color: var(--light-blue); /* Change ">" symbol to light blue on hover */
}

/* Active effect */
.btn:active {
  filter: brightness(85%); /* Darken the button on click */
  border-color: white !important; /* Change border color on active */
}

.btn:active::before {
  background-color: var(
    --light-blue
  ); /* Reset dot color to light blue when active */
  color: white; /* Reset ">" symbol color to white when active */
}

.confirm-btn {
  border-radius: 15px;
  height: 28px;
  display: flex;
  justify-content: space-between;
  border: 2px solid #25a7e4;
  align-items: center;
  background-color: #fff;
  max-width: 145px;
}

.confirm-btn p {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 0;
  margin-left: 25px;
}

.confirm-btn img {
  width: 19px;
  margin-right: 4px;
}

/*---- Main Header ----*/

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
  background-color: var(--primary-color); /* Use primary color */
}

/* Logo styling */
.logo img {
  height: 40px; /* Adjust logo size */
}

/* Right-side container for toggler and language selector */
.right-section {
  display: flex; /* Align items in a row */
  align-items: center;
  gap: 20px; /* Spacing between toggler and language selector */
  justify-content: center;
}

/* Language Selector */
.language-selector {
  position: relative;
  display: inline-block;
}

/* Button to show flag */
.language-selector .dropdown-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.3s ease; /* Smooth transition for button */
  display: flex;
}

/* Flag styling */
.language-selector .dropdown-btn img {
  height: 27px; /* Adjust flag size */
  transition: transform 0.3s ease; /* Smooth transition for the flag */
}

/* Dropdown Content */
.language-selector .dropdown-content {
  display: none; /* Hidden by default */
  position: absolute;
  background-color: var(--primary-color); /* White background for dropdown */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  top: 45px; /* Position the dropdown below the flag */
  right: -31px; /* Align the dropdown to the right */
  width: 120px;
  text-align: left;
  opacity: 0; /* Initially invisible */
  visibility: hidden; /* Hide the dropdown by default */
  transform: translateY(-10px); /* Slightly off-screen for smooth entrance */
  transition: opacity 0.3s ease, visibility 0s 0.3s, transform 0.3s ease; /* Smooth transition */
  border-radius: 5px;
}

/* Style for each language item in the dropdown */
.language-selector .dropdown-content a {
  color: var(--white-color);
  padding: 10px 15px;
  text-decoration: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  gap: 15px;
}

.language-selector .dropdown-content a:hover {
  color: rgb(228, 228, 228);
}

.language-selector .dropdown-content a img {
  height: 25px;
}

/* Show dropdown when button is clicked */
.language-selector .show {
  display: block; /* Show the dropdown */
  opacity: 1; /* Make it visible */
  visibility: visible;
  transform: translateY(0); /* Move dropdown into place */
}

/* Menu Toggle */
.menu-toggle {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s ease; /* Smooth transition for the toggle */
}

.menu-toggle .bar {
  background-color: var(--white-color); /* Use white color for bars */
  width: 25px;
  height: 3px;
  margin: 3px 0;
  transition: all 0.3s ease;
  border-radius: 5px;
}

/* Menu Styles */
.menu {
  display: none; /* Initially hidden */
  position: absolute;
  top: 60px; /* Position below the header */
  right: 0;
  background-color: var(--primary-color);
  padding: 15px;
  width: 200px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  opacity: 0; /* Initially invisible */
  visibility: hidden; /* Hide the menu by default */
  transform: translateY(-20px); /* Slide the menu from above */
  transition: opacity 0.3s ease, visibility 0s 0.3s, transform 0.3s ease; /* Smooth transition */
  border-radius: 5px;
}

.menu.show {
  display: block; /* Show the menu when 'show' class is added */
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* Move menu into place */
}

.menu ul {
  list-style-type: none;
}

.menu ul li {
  margin-bottom: 10px;
}

.menu ul li a {
  color: var(--white-color); /* Use white color for text */
  text-decoration: none;
  font-size: 16px;
}

.menu ul li a:hover {
  color: rgb(228, 228, 228);
}

/* For small screens (e.g., mobile devices), ensure dropdowns fit properly */
@media (max-width: 768px) {
  .header {
    padding: 15px 20px;
  }

  .logo img {
    height: 35px; /* Adjust logo size for smaller screens */
  }

  .right-section {
    gap: 10px; /* Adjust spacing for smaller screens */
  }

  .language-selector .dropdown-btn img {
    height: 25px; /* Adjust flag size for smaller screens */
  }

  .language-selector .dropdown-content {
    right: -15px;
  }

  .menu {
    width: 100%; /* Menu takes full width on smaller screens */
  }
}

/*---- Main Footer  ---- */
footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-menu {
  width: 100%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
}

.footer-menu ul {
  display: flex;

  align-items: center;
  width: 100%;
}
.footer-menu ul li {
  text-decoration: none;
  list-style: none;
  padding: 12px 30px;
}

.footer-menu ul li a {
  text-decoration: none;
  color: var(--white-color);
  font-size: 14px;
  font-weight: 700;
}
.footer-menu ul:first-of-type {
  justify-content: flex-end;
}

.footer-copy {
  width: 100%;
  display: flex;
  border: none;
}

.footer-copy {
  text-decoration: none;
  color: #fff;
  padding: 8px 30px;
  font-size: 12px;
  font-weight: 700;
}

.footer-copy-text {
  display: none;
  width: 100%;
  margin-top: -1px;
  justify-content: space-between;
  background-color: var(--primary-color);
  border: none;
}

.footer-copy-text a {
  text-decoration: none;
  color: #fff;
  padding: 8px 30px;
  font-size: 12px;
  font-weight: 700;
}

.footer-copy:nth-of-type(2) {
  text-align: end;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .footer-menu ul {
    flex-direction: column;
  }
  .footer-copy {
    display: none;
  }
  .footer-copy-text {
    display: flex;
  }
}

/*------------ Home page Start---------------- */

main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*------ Buy Follow Receive Start------ */

.buy-follow-receive {
  display: flex;
  width: 100%;
  max-width: 1330px;
  justify-content: center;
  align-items: center;
  padding: 30px 60px;
  background-color: var(--white-color);
}

.left-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.right-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin-top: 150px;
  height: 550px;
}
.right-box .right-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 550px;
}

.video-container {
  position: relative;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container img {
  width: 100%;
}

.video-container video {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 99.9%;
  object-fit: cover;
}

.buy-follow-receive h1 {
  line-height: 1.4;
  width: 100%;
  margin-bottom: 40px;
}

.buy-follow-receive__buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
  margin-top: 20px;
}

.btn-box1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 30px;
}
.btn-box2 {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 20px;
}

.buy-follow-receive__btn {
  background: linear-gradient(to right, #fff 90%, var(--primary-color) 70%);
  color: var(--primary-color);
  font-size: 14px;
  width: 255px;
  border: 3px solid var(--primary-color);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  overflow: hidden;
}

.buy-follow-receive__btn p {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  color: var(--primary-color);
  width: 100%;
  margin-bottom: 0;
  text-transform: uppercase;
}

.buy-follow-receive__btn img {
  width: 100%;
  max-width: 60px;

  padding: 12px 5px 12px 12px;
  overflow: hidden;
  border-radius: 15px;
  clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 40% 100%, 0% 50%);
  border: none;
  background: var(--primary-color);
  object-fit: cover;
}

.buy-follow-receive__transaction-link {
  color: var(--primary-color);
  display: block;
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
  font-weight: 700;
}

.buy-follow-receive__payments {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 80px;
}

.buy-follow-receive__payments img {
  width: 69px;
  object-fit: cover;
}

.buy-follow-receive__payments img:nth-of-type(4),
.buy-follow-receive__payments img:nth-of-type(5) {
  width: 49px;
}

/* Image Section */
.buy-follow-receive__image {
  flex: 1 1 40%;
  display: flex;
  justify-content: center;
  padding: 20px;
  min-width: 300px;
}

.buy-follow-receive__image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Button Container */
.custom-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 293px;
  height: 60px;
  border: 3px solid #205b82; /* Border color */
  border-radius: 50px; /* Rounded corners */
  background-color: transparent; /* Transparent background */
  padding: 0 20px;
  box-sizing: border-box;
  color: #205b82; /* Icon color */
  font-size: 28px;
  margin-top: 30px;
  margin-bottom: 10px;
  margin-right: 30px;
}

/* Left Icon (Curved Arrow) */
.icon-left {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right Arrow */
.arrow-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icons Styling */
.custom-button i {
  font-weight: 900;
  cursor: pointer;
}

.custom-button input {
  height: 30px;
  padding-left: 10px;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 700;
  border: none;
  overflow: hidden;
  max-width: 200px;
  margin-bottom: 0;
}

.custom-button input::placeholder {
  text-align: center;
  color: #333;
  font-size: 14px;
  opacity: 0.5;
}

.custom-button input:focus {
  border: none;
  outline: none;
}

/* Responsive Design */
@media (max-width: 900px) {
  .buy-follow-receive {
    flex-direction: column;
    text-align: center;
    padding: 30px;
  }

  .buy-follow-receive__text-section,
  .buy-follow-receive__image {
    flex: 1 1 100%;
    text-align: center;
  }

  .buy-follow-receive__buttons {
    justify-content: center;
  }

  .buy-follow-receive__transaction-link {
    text-align: center;
  }
  .buy-follow-receive h1 {
    text-align: start;
  }
  .video-container {
    width: 100%;
  }
  .btn-box2 {
    flex-direction: column;
  }
  .right-box {
    margin-top: 40px;
    height: 600px;
    align-items: center;
  }
  .custom-button {
    margin-right: 0;
  }
  .buy-follow-receive__payments img {
    width: 49px;

    object-fit: cover;
  }

  .buy-follow-receive__payments img:nth-of-type(4),
  .buy-follow-receive__payments img:nth-of-type(5) {
    width: 29px;
  }
}

/*------- Buy Follow Receive End-------- */
/*--------- How it works Start--- */

.how-it-works {
  display: flex;
  width: 100%;
  max-width: 1330px;
  justify-content: center;
  align-items: center;
  padding: 30px 60px;
  background-color: var(--white-color);
}

.how-it-works .left-box01 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.how-it-works ul {
  padding-left: 1.5rem; /* oppure 20px */
  margin: 1rem 0;
}

.how-it-works ul li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.how-it-works .right-box01 {
  width: 100%;
  display: flex;

  justify-content: flex-end;
  align-items: center;
}

.right-box01 img {
  width: 100%;
  max-width: 600px;
}

.how-it-works h1 {
  width: 100%;
  margin-bottom: 40px;
}

.how-it-works p {
  line-height: 1.5;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 900px) {
  .how-it-works {
    flex-direction: column;
    text-align: center;
    padding: 30px;
  }
  .how-it-works h1,
  .how-it-works p {
    text-align: start;
  }
  .right-box01 {
    margin-top: 40px;
  }
}

/*------------ How it works End-------------- */

/*------- Pay with Oasipay Start-------- */

.Pay-with-Oasipay {
  display: flex;
  width: 100%;
  max-width: 1330px;
  justify-content: center;
  align-items: center;
  padding: 30px 60px;
  background-color: var(--white-color);
  flex-direction: column;
}

.Pay-with-Oasipay h1 {
  width: 100%;
  margin-bottom: 60px;
  text-align: center;
}

.Pay-with-Oasipay p {
  line-height: 1.5;
  font-weight: 500;
  margin: 40px 0;
}

.content-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 115px;
}

.content-box .item-box {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.content-box .item-box span {
  width: 50px; /* Explicit width for the circle */
  height: 50px;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);

  font-size: 20px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-box img {
  width: 45px;
}
.line-shape img {
  max-width: 500px;
  width: 100%;
  margin: 20px 0;
}
.Pay-with-Oasipay .line-shape img {
  max-width: 500px;
  width: 100%;
  margin: 50px 0;
}

/* Responsive Design */
@media (max-width: 900px) {
  .Pay-with-Oasipay {
    flex-direction: column;
    text-align: center;
    padding: 30px;
  }
  .Pay-with-Oasipay h1,
  .Pay-with-Oasipay p {
    text-align: start;
  }
  .content-box {
    flex-direction: column;
    gap: 25px;
  }
  .line-shape img {
    max-width: 100%;
  }
}

/*------------ Pay with Oasipay End-------------- */

/*--------- A little about Oasipay Section Start --------*/
.little-about-oasipay {
  display: flex;
  width: 100%;
  max-width: 1330px;
  justify-content: center;
  align-items: center;
  padding: 70px 60px;
  background-color: var(--white-color);
}

.little-about-oasipay .left-box02 {
  width: 100%;
  display: flex;

  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.little-about-oasipay .right-box02 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.little-about-oasipay ul {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.little-about-oasipay ul li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.right-box02 img {
  width: 100%;
  max-width: 400px;
}

.little-about-oasipay h1 {
  width: 100%;
  margin-top: 80px;
}

.little-about-oasipay p {
  line-height: 1.5;
  font-weight: 500;
}

.video-container01 {
  position: relative;
  width: 60%;
  margin-left: -15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container01 video {
  width: 100%; /* Ensure it fills the container */

  object-fit: cover;
}

.video-container01 video::-webkit-media-controls {
  display: none !important;
}
.video-container01 video::-webkit-media-controls-panel {
  display: none !important;
}
.video-container01 video::-webkit-media-controls-enclosure {
  display: none !important;
}

.video-container01 img {
  width: 150px;
  z-index: 3;
  position: absolute;
}

@media (max-width: 1800px) {
  .video-container01 img {
    right: -22%;
    bottom: -16%;
  }
}

/* Responsive Design */
@media (max-width: 900px) {
  .little-about-oasipay {
    flex-direction: column;
    text-align: center;
    padding: 30px;
  }
  .little-about-oasipay h1,
  .little-about-oasipay p {
    text-align: start;
  }
  .right-box02 {
    margin-top: 40px;
  }
  .video-container01 {
    width: 80%;
  }
  .video-container01 img {
    width: 150px;
    z-index: 3;
    position: absolute;
    right: -22%;
    bottom: -16%;
  }
  .little-about-oasipay .left-box02 {
    justify-content: center;
  }
}

/*--------- A little about Oasipay Section End --------*/
/* Style for the scroll-to-top button */
.scroll-to-top {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 20px; /* Distance from the bottom */
  left: 20px; /* Distance from the right */
  width: 40px;
  height: 40px;
  background-color: var(--primary-color); /* Blue background */
  color: #fff; /* White arrow */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  text-align: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s;
}

.scroll-to-top img {
  padding: 10px;
}

.scroll-to-top:hover {
  background-color: #1e4d7a; /* Darker blue on hover */
}

/*----------------- Home page End------------------- */
/*--------- Make a Payment Page Start-------------- */

.make-a-payment-container {
  display: flex;
  width: 100%;
  max-width: 1212px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background-color: var(--white-color);
}

.make-a-payment-form {
  background-color: #fdfbfc;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  width: 100%;
  padding: 20px 40px 20px 5px;
}

.make-a-payment-form .btn {
  width: 180px;
  font-size: 11px;
}

.make-a-payment-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 380px;
}

.make-a-payment-container h1 {
  width: 100%;
  margin-bottom: 20px;
  text-align: start;
}

.make-a-payment-form-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 15px;
}

.make-a-payment-form-left {
  width: 80%;
}

.make-a-payment-form-right img {
  width: 35px;
  margin-top: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.make-a-payment-text {
  font-size: 12px;
  /*margin: 20px 0;*/
}

.make-a-payment-column:first-of-type .confirm-btn {
  margin-top: 20px;
}

.make-a-payment-btn-box {
  display: flex;
  justify-content: space-between;

  width: 100%;
}

.make-a-payment-btn-box .confirm-btn {
  margin-top: 0;
  width: 220px !important;
}
.make-a-payment-btn-box .confirm-btn p {
  margin-left: 10px;
}

.make-a-payments-images-rows {
  display: flex;
  justify-content: center;
  gap: 50px;
  width: 100%;
}

.make-a-payments-images-rows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
  margin-bottom: 10px;
}

.make-a-payments-images-rows img {
  width: 40px;
  height: auto;
}

.make-a-payment-column textarea {
  resize: none;
  width: 100%;
  height: 120px;
  display: flex; /* Enable flexbox for centering */
  align-items: center; /* Center content vertically */
  justify-content: center;
}

.make-a-payment-column input::placeholder {
  color: #e4e4e4;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.make-a-payment-column textarea::placeholder {
  color: #e4e4e4;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 40px;
}

.make-a-payment-seller-price {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.make-a-payment-price {
  color: #6cb74e;
  background-color: #ffffff;
  text-align: center;
  font-size: 55px;
  font-weight: 700;
  border: var(--border);
}

.make-a-payment-price-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.make-a-payment-fee-details {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  width: 85%;
  align-items: center;
}

.make-a-payment-fee-details-span {
  margin-left: auto;
  margin-right: auto;
  color: #6cb74e;
  background-color: #ffffff;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border: var(--border);
  padding: 5px 15px;
  width: 40%;
}

.make-a-payment-fee-text {
  font-size: 10px;
  margin: 20px 0;
  text-align: center;
}

.make-a-payment-radio-options {
  display: flex;
  width: 100%;
  margin-top: 10px;
  justify-content: center;
}

.make-a-payment-radio-options label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  width: 100%;
  margin-bottom: 0;
  gap: 7px;
}
.make-a-payment-radio-options label input {
  width: 20px;
  font-size: 10px;
}

a.disabled-link {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Hide the default radio button */
input[type="radio"] {
  display: none;
}

.make-a-payment-msize {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
  margin-right: 20%;
}

.form-group1 {
  width: 70%;
}

.make-a-payment-price01 {
  width: 80%;
  margin: auto;
}

.make-a-payment-column:nth-of-type(3) input {
  height: 23px;
}
.make-a-payment-column:nth-of-type(3) label {
  font-size: 12px;
}

.make-a-payment-column:nth-of-type(3) .form-group-box {
  width: 90%;
  display: flex;
  gap: 50px;
}
.make-a-payment-column:nth-of-type(3)
  .form-group-box
  .form-group:nth-of-type(1) {
  width: 40%;
}

.make-a-payment-column:nth-of-type(2) .buy-follow-receive__btn {
  width: 170px;
  height: 25px;
  border: 2px solid var(--primary-color);
}
.make-a-payment-column:nth-of-type(2) .buy-follow-receive__btn img {
  width: 40px;
}
.make-a-payment-column:nth-of-type(2) .buy-follow-receive__btn p {
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 768px) {
  .make-a-payment-form {
    align-items: center;
    padding: 10px;
    flex-direction: column;
  }
}

/*--------- Make a Payment Page End------------------- */
/*--------- Generate seller code Page Start----------- */
.generate-seller-code-container {
  display: flex;
  width: 100%;
  max-width: 1212px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background-color: var(--white-color);
}

.generate-seller-code-form {
  background-color: #fdfbfc;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  gap: 80px;
  padding: 30px 40px 20px 35px;
  flex-direction: column;
}

.generate-seller-code-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-evenly;
}

.generate-seller-code-row:nth-of-type(1) .form-group {
  width: 70%;
}

.generate-seller-code-row:nth-of-type(1) input {
  height: 30px;
  margin: auto;
}

.generate-seller-code-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.generate-seller-code-column-mail {
  flex-direction: row;
  gap: 20px;
  align-items: flex-end;
}

.generate-seller-code-column-mail .form-group {
  width: 100%;
}

.generate-seller-code-container h1 {
  width: 100%;
  margin-bottom: 20px;
  text-align: start;
}

.generate-seller-code-form-right img {
  width: 35px;
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.generate-seller-code-row:nth-of-type(2) .generate-seller-code-column {
  justify-content: center;
  align-items: center;
}

.generate-seller-code-row:nth-of-type(2) .form-group {
  width: 60%;
}

.generate-seller-code-text {
  font-size: 12px;
  margin: 20px 0;
}

.generate-seller-code-container textarea {
  resize: none;
  width: 100%;
  height: 120px;
  display: flex; /* Enable flexbox for centering */
  align-items: center; /* Center content vertically */
  justify-content: center;
}

.generate-seller-code-container textarea::placeholder {
  color: #e4e4e4;
  font-size: 12px;
  font-weight: 600;
  padding-top: 50px;
}

.generate-seller-code-seller-price {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 40px;
}

.generate-seller-code-price {
  color: #6cb74e;
  background-color: #ffffff;
  text-align: center;
  font-size: 50px;
  font-weight: 700;
  border: var(--border);
  margin: auto;
  width: 50%;
  border-radius: 5px;
}

.generate-seller-code-fee-text {
  font-size: 10px;
  margin: 20px 0;
  text-align: center;
}

.generate-seller-code-container input::placeholder {
  color: #e4e4e4;
  font-size: 12px;
  font-weight: 600;
}

.generate-seller-code-container .generate-seller-code-radio-options {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 20px;
}

.generate-seller-code-container .generate-seller-code-radio-options label {
  display: flex;
  margin-left: 15%;
  align-items: center;
  font-size: 10px;
  width: 100%;
  margin-bottom: 0;
  gap: 7px;
}

.generate-seller-code-container
  .generate-seller-code-radio-options
  label
  input {
  width: 20px;
  font-size: 10px;
}

.generate-seller-code-container .generate-seller-code-radio-options img {
  width: 70px;
}

.generate-seller-code-container
  .generate-seller-code-radio-options
  label:nth-of-type(2)
  img {
  width: 37px !important;
}

/* Hide the default radio button */
.generate-seller-code-container input[type="radio"] {
  display: none;
}

/* Style the custom radio button */
.generate-seller-code-container .custom-radio {
  width: 16px;
  height: 16px;
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  display: inline-block;
  transition: border-color 0.3s ease;
}

/* Add the checkmark style when selected */
.generate-seller-code-container .custom-radio::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #4caf50; /* Green background */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white" stroke="white" stroke-width="1"><path d="M13.86 4.29a1 1 0 00-1.41 0L6 10.59 3.71 8.29a1 1 0 00-1.42 1.42l3 3a1 1 0 001.42 0l7-7a1 1 0 000-1.42z"/></svg>');
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
}

/* Show checkmark when selected */
.generate-seller-code-container
  input[type="radio"]:checked
  + .custom-radio::after {
  transform: translate(-50%, -50%) scale(1);
  border: none;
}

.generate-seller-code-form-main-receive-payment {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.generate-seller-code-form-main-receive-payment
  .generate-seller-code-form-left {
  position: relative;
  gap: 0;
  padding-right: 25px;
  width: 100%;
}

.generate-seller-code-form-main-receive-payment
  .generate-seller-code-form-left
  label {
  margin-bottom: 5px;
  font-size: 13px;
}

.generate-seller-code-form-main-receive-payment
  .generate-seller-code-form-left
  input {
  margin-bottom: 5px;
}

.generate-seller-code-form-main-receive-payment
  .generate-seller-code-form-left::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%; /* Start from 20% of the height */
  height: 80%; /* 80% - 20% = 60% of the height */
  width: 1px; /* Border thickness */
  background-color: rgb(185, 185, 185); /* Border color */
}

.generate-seller-code-form-main-receive-payment
  .generate-seller-code-form-right {
  padding-left: 25px;
  width: 100%;
}

.generate-seller-code-form-main-receive-payment
  .generate-seller-code-form-right
  label {
  font-size: 12px;
  text-align: center;
  width: 80%;
}

.generate-seller-code-form-main-receive-payment
  .generate-seller-code-form-left
  .form-group:first-of-type
  label {
  font-size: 10px;
}

.generate-seller-code-form-main-receive-payment
  .generate-seller-code-form-left
  .form-group:first-of-type
  input {
  height: 20px;
}

.generate-seller-code-msize {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 50px;
  margin-right: 20%;
}

.generate-seller-code-column:nth-of-type(2) .generate-seller-code-fee-text {
  text-align: start;
  width: 80%;
  margin: 0;
}

.generate-seller-code-column .generate-seller-code-fee-text:nth-child(8) {
  margin-bottom: 20px;
}

.form-group label[for="province-input"] {
  width: 100% !important;
}

.form-group1 {
  width: 70%;
}

.generate-seller-code-column .buy-follow-receive__btn {
  border: 2px solid var(--primary-color);
  width: 200px;
}

.generate-seller-code-column .buy-follow-receive__btn img {
  max-width: 50px;
}

@media (max-width: 768px) {
  .generate-seller-code-form {
    align-items: center;
    padding: 10px;
    flex-direction: column;
  }
  .generate-seller-code-row {
    flex-direction: column;
  }
  .generate-seller-code-row:nth-of-type(2) .form-group {
    width: 100%;
  }
  .generate-seller-code-price {
    width: 100%;
  }
  .generate-seller-code-seller-price {
    margin: 20px 0 15px 0;
  }
}

/*----------- Generate seller code Page End---------------- */
/*------------- Pay without code Page Start--------------- */
.pay-without-code-container {
  display: flex;
  width: 100%;
  max-width: 1212px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background-color: var(--white-color);
}

.pay-without-code-form {
  width: 100%;
  background-color: #fdfbfc;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  padding: 20px 20px 10px 5px;
  /* gap: 80px; */
  margin: 30px auto;
}

.pay-without-code-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pay-without-code-container h1 {
  width: 100%;
  margin-bottom: 30px;
  margin-top: 25px;
  text-align: start;
  font-size: 28px;
}

/* Style for the first column */
.pay-without-code-column:nth-of-type(1) {
  /* Default size for column 1 */
  width: 100%;
  margin: 0;
  max-width: 350px;
}

/* Style for the second column */
.pay-without-code-column:nth-of-type(2) {
  /* Make column 2 twice as big as column 1 and 3 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  max-width: 350px;
}

.pay-without-code-column:nth-of-type(1) .pay-without-code-form-main {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  gap: 25px;
}

.pay-without-code-form-left {
  width: 80%;
  display: flex;
  flex-direction: column;
}

.pay-without-code-form-right img {
  width: 35px;
  margin-top: 15px;
}

.form-group-seller-code-input .form-group {
  width: 100%;
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.generate-seller-code-text {
  font-size: 12px;
  margin: 20px 0;
  text-align: center;
}

.pay-without-code-container textarea {
  resize: none;
  width: 100%;
  height: 120px;
  display: flex; /* Enable flexbox for centering */
  align-items: center; /* Center content vertically */
  justify-content: center;
}

.pay-without-code-seller-price {
  font-size: 14px;
  font-weight: 700;
}

.pay-without-code-column:nth-of-type(2) .pay-without-code-seller-price {
  font-size: 18px;
}

.pay-without-code-seller-price01 {
  font-size: 28px !important;
}

.pay-without-code-text {
  font-size: 10px;
}

.pay-without-code-text:nth-last-of-type(1) {
  font-size: 10px;
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
}

/*.pay-without-code-price {
  color: #6cb74e;
  background-color: #ffffff;
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  border: var(--border);
  margin: 0 auto;
}*/

.pay-without-code-column:nth-of-type(1) .pay-without-code-price {
  text-align: center;
  font-size: 35px;
}

.pay-without-code-column:nth-of-type(2) .pay-without-code-price {
  font-size: 50px;
  width: 90%;
  margin-bottom: 15px;
}

.pay-without-code-column:nth-of-type(2) .make-a-payment-price01 {
  font-size: 30px;
  font-weight: 700;
  border: var(--border);
  width: 50%;
  margin: 0 auto;
  margin-bottom: 20px;
}

.pay-without-code-fee-text {
  font-size: 10px;
  margin: 20px 0;
  text-align: center;
}

.pay-without-code-column:nth-of-type(1) .buy-follow-receive__payments {
  margin-top: 5px;
  justify-content: center;
  margin-bottom: 25px;
}

.pay-without-code-column:nth-of-type(1) .buy-follow-receive__payments img {
  width: 40px;
}

.pay-without-code-column:nth-of-type(1)
  .buy-follow-receive__payments
  img:nth-of-type(4),
.pay-without-code-column:nth-of-type(1)
  .buy-follow-receive__payments
  img:nth-of-type(5) {
  width: 30px;
}

.pay-without-code-form-main-receive-payment {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.pay-without-code-form-main-receive-payment .pay-without-code-form-left {
  position: relative;
  gap: 0;
  padding-right: 25px;
  width: 100%;
}

.pay-without-code-form-main-receive-payment .pay-without-code-form-left label {
  margin-bottom: 5px;
  font-size: 13px;
}

.pay-without-code-form-main-receive-payment .pay-without-code-form-left input {
  margin-bottom: 5px;
}

.pay-without-code-form-main-receive-payment .pay-without-code-form-left::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%; /* Start from 20% of the height */
  height: 80%; /* 80% - 20% = 60% of the height */
  width: 1px; /* Border thickness */
  background-color: rgb(185, 185, 185); /* Border color */
}

.pay-without-code-form-main-receive-payment .pay-without-code-form-right {
  padding-left: 25px;
  width: 100%;
}

.pay-without-code-form-main-receive-payment .pay-without-code-form-right label {
  font-size: 12px;
  text-align: center;
  width: 80%;
}

.pay-without-code-form-main-receive-payment
  .pay-without-code-form-left
  .form-group:first-of-type
  label {
  font-size: 10px;
}

.pay-without-code-msize {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 50px;
  margin-right: 20%;
}

.pay-without-code-column:nth-of-type(2) .pay-without-code-fee-text {
  text-align: start;
  width: 90%;
  margin: 0;
}

.pay-without-code-column:nth-of-type(2) .buy-follow-receive__btn {
  width: 190px;
  height: 25px;
  border: 2px solid var(--primary-color);
  margin-top: 40px;
}

.pay-without-code-column:nth-of-type(2) .buy-follow-receive__btn p {
  font-size: 12px;
  font-weight: 700;
}
.pay-without-code-column:nth-of-type(2) .buy-follow-receive__btn img {
  width: 50px;
}

@media (max-width: 768px) {
  .pay-without-code-form {
    align-items: center;
    padding: 10px;
    flex-direction: column;
  }
}
/*---------- Pay without code Page End----------------- */
/*----------- Receive a Payment Page Start------------- */
.receive-payment-container {
  display: flex;
  width: 100%;
  max-width: 1312px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background-color: var(--white-color);
}

.receive-payment-form {
  background-color: #fdfbfc;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  gap: 50px;
  padding: 20px 40px 20px 5px;
}

.receive-payment-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.receive-payment-column:nth-of-type(1) {
  flex: 1;
  align-items: center;
}

.receive-payment-column:nth-of-type(2) {
  flex: 1;
  display: flex;
  justify-content: center;
  height: 500px;
}

.receive-payment-column:nth-of-type(3) {
  flex: 1;
  justify-content: center;
  align-items: center;
}

.receive-payment-column:nth-of-type(1) .btn {
  font-size: 12px;
  width: 190px;
}

.receive-payment-container h1 {
  width: 100%;
  margin-bottom: 20px;
  text-align: start;
}

.receive-payment-form-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 20px;
}

.receive-payment-form-left {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.receive-payment-form-left .form-group label {
  margin-bottom: 15px;
}

.receive-payment-form-right img {
  width: 35px;
  margin-top: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.receive-payment-text {
  font-size: 12px;
  margin: 20px 0;
}

.receive-payment-btn-box {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
  margin-bottom: 25px;
  width: 100%;
  gap: 20px;
}

.make-a-payment-column:nth-of-type(2) .form-group:nth-of-type(1) input {
  height: 30px !important;
}

.receive-payment-column textarea {
  resize: none;
  width: 100%;
  height: 120px;
  display: flex; /* Enable flexbox for centering */
  align-items: center; /* Center content vertically */
  justify-content: center;
}

.receive-payment-column input::placeholder {
  color: #e4e4e4;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.receive-payment-column textarea::placeholder {
  color: #e4e4e4;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 40px;
}

.receive-payment-price {
  margin-left: auto;
  margin-right: auto;
  color: #6cb74e;
  background-color: #ffffff;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  border: var(--border);
  padding: 5px 15px;
  width: 80%;
}

.receive-payment-fee-text {
  font-size: 11px;
  margin: 20px 0;
  text-align: start;
}

.receive-payment-container .receive-payment-radio-options {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 20px;
}

.receive-payment-container .receive-payment-radio-options label {
  display: flex;
  margin-left: 15%;
  align-items: center;
  font-size: 10px;
  width: 100%;
  margin-bottom: 0;
  gap: 7px;
}

.receive-payment-container .receive-payment-radio-options label input {
  width: 20px;
  font-size: 10px;
}

.receive-payment-container .receive-payment-radio-options img {
  width: 120px;
  margin-left: 20px;
}

.receive-payment-container
  .receive-payment-radio-options
  label:nth-of-type(2)
  img {
  width: 37px !important;
}

.payment-pill-wrapper {
  display: flex;
  align-items: stretch;
  border-radius: 0 999px 999px 0;
  overflow: hidden;
  width: 100%;
  height: 45px;
}

.buyer-pay-input {
  flex: 1;
  height: 100%;
  border: none;
  padding: 0 15px;
  font-size: 22px;
  outline: none;
  
  color: #6cb74e;
  background-color: #ffffff;
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  border: var(--border);
  margin: 0 auto;
}

.currency-select {
  width: 100px;
  height: 100%;
  padding: 0 15px;
  appearance: none;         /* 👈 rimuove stile nativo */
  -webkit-appearance: none; /* 👈 Safari */
  -moz-appearance: none;    /* 👈 Firefox */
  outline: none;
  position: relative;
  
  color: #6cb74e;
  background-color: #ffffff;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  border: var(--border);
  margin: auto;
  padding-left: 5px;
  padding-right: 30px;
}

.currency-select-wrapper {
  position: relative;
  width: 100px;
  height: 100%;
}

.currency-select-wrapper::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  width: 16px;
  height: 16px;
  background-image: url('/assets/images/up-arrow-colored.png');
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
}

/* Hide the default radio button */
.receive-payment-container input[type="radio"] {
  display: none;
}

/* Style the custom radio button */
.receive-payment-container .custom-radio {
  width: 16px;
  height: 16px;
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  display: inline-block;
  transition: border-color 0.3s ease;
}

/* Add the checkmark style when selected */
.receive-payment-container .custom-radio::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #4caf50; /* Green background */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white" stroke="white" stroke-width="1"><path d="M13.86 4.29a1 1 0 00-1.41 0L6 10.59 3.71 8.29a1 1 0 00-1.42 1.42l3 3a1 1 0 001.42 0l7-7a1 1 0 000-1.42z"/></svg>');
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
}
/* Show checkmark when selected */
.receive-payment-container input[type="radio"]:checked + .custom-radio::after {
  transform: translate(-50%, -50%) scale(1);
  border: none;
}

.receive-payment-msize {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 15px;
  width: 100%;
  text-align: start;
  color: var(--primary-color);
  padding-left: 30px;
}

.receive-payment-column:nth-of-type(2) .form-group input {
  height: 32px;
}

.receive-payment-column:nth-of-type(3) .form-group {
  width: 80%;
}

.receive-payment-radio-options .paypal-icon {
  width: 60px !important;
  margin: 20px 0;
}

.form-group-f label {
  width: 100%;
  font-size: 13px;
}

.receive-payment-column:nth-of-type(3) .buy-follow-receive__btn {
  width: 170px;
  height: 25px;
  border: 2px solid var(--primary-color);
}

.receive-payment-column:nth-of-type(3) .buy-follow-receive__btn img {
  width: 50px;
}

.receive-payment-column:nth-of-type(3) .buy-follow-receive__btn p {
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .receive-payment-form {
    align-items: center;
    padding: 10px;
    flex-direction: column;
    gap: 30px;
  }
}

/*-----------Receive a Payment Page End------------------ */
/*-----------Contact Us Page Start-------------------- */
.contact-us-container {
  display: flex;
  width: 100%;
  max-width: 1212px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background-color: var(--white-color);
}

.contact-us-form {
  background-color: #fdfbfc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 40px;
}

.contact-us-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.contact-us-row {
  background-color: #fdfbfc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 40px;
}

.contact-us-column:nth-of-type(1) {
  max-width: 330px;
}

.contact-us-column:nth-of-type(2) {
  max-width: 650px;
}

.contact-us-container h1 {
  width: 100%;
  margin-bottom: 20px;
  text-align: start;
}

.contact-us-column .form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-us-column .form-group label {
  color: var(--primary-color);
  margin-bottom: 35px;
}

.contact-us-column .form-group input {
  height: 29px;
}

.contact-us-column .form-group input::placeholder {
  color: #e4e4e4;
  font-size: 14px;
  font-weight: 600;
}

.contact-us-column textarea {
  resize: none;
  width: 100%;
  height: 320px;
  display: flex; /* Enable flexbox for centering */
  align-items: center; /* Center content vertically */
  justify-content: center;
}

.contact-us-column textarea::placeholder {
  color: #e4e4e4;
  font-size: 14px;
  font-weight: 600;
  padding-top: 150px;
}

.contact-us-text {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 11px;
}

.contact-us-btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  margin-top: 50px;
}

.contact-us-btn-box .buy-follow-receive__buttons {
  margin-top: 0;
}

.contact-us-btn-box .buy-follow-receive__btn {
  width: 165px;
  height: 25px;
  border: 2px solid var(--primary-color);
}

.contact-us-btn-box .buy-follow-receive__btn img {
  width: 45px;
  background: var(--primary-color);
}

.contact-us-btn-box .buy-follow-receive__btn p {
  font-size: 12px;
  font-weight: 700;
  margin-left: 20px;
}

.contact-us-btn-box .confirm-btn {
  border-radius: 15px;
  min-width: 160px !important;
  height: 25px;
  display: flex;
  justify-content: space-between;
  border: 2px solid #25a7e4;
  align-items: center;
  background-color: #fff;
}

.contact-us-btn-box .confirm-btn p {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 0;
  margin-left: 55px;
  color: #000;
}

.contact-us-btn-box .confirm-btn img {
  width: 19px;
  margin-right: 4px;
}

@media (max-width: 768px) {
  .contact-us-form {
    align-items: center;
    padding: 10px;
    flex-direction: column;
    gap: 30px;
  }
  .contact-us-btn-box {
    gap: 30px;
    margin-top: 50px;
  }
}

/*-------------Contact Us Page End--------------- */
/*-------------Tell Us Page Start--------------- */
.tell-us-container {
  display: flex;
  width: 100%;
  max-width: 1212px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background-color: var(--white-color);
}

.tell-us-form {
  background-color: #fdfbfc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 40px;
}

.tell-us-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tell-us-row {
  background-color: #fdfbfc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 40px;
}

.tell-us-column:nth-of-type(1) {
  max-width: 330px;
  align-items: center;
}

.tell-us-column:nth-of-type(1) > div:first-child {
  align-self: flex-start; /* Override alignment for the first child */
}

.tell-us-column:nth-of-type(2) {
  max-width: 650px;
}

.tell-us-container h1 {
  width: 100%;
  margin-bottom: 20px;
  text-align: start;
}

.tell-us-column .form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tell-us-column .form-group label {
  color: var(--primary-color);
  margin-bottom: 35px;
}

.tell-us-column .form-group input {
  height: 29px;
}

.tell-us-column .form-group input::placeholder {
  color: #e4e4e4;
  font-size: 14px;
  font-weight: 600;
}

.tell-us-column textarea {
  resize: none;
  width: 100%;
  height: 320px;
  display: flex; /* Enable flexbox for centering */
  align-items: center; /* Center content vertically */
  justify-content: center;
}

.tell-us-column textarea::placeholder {
  color: #e4e4e4;
  font-size: 14px;
  font-weight: 600;
  padding-top: 150px;
}

.tell-us-text {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 0;
  width: 80%;
}

.tell-us-btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  margin-top: 50px;
}

.tell-us-btn-box .buy-follow-receive__buttons {
  margin-top: 0;
}

.tell-us-btn-box .buy-follow-receive__btn {
  width: 160px;
  height: 25px;
  border: 2px solid var(--primary-color);
}
.tell-us-btn-box .buy-follow-receive__btn img {
  width: 45px;
  background: var(--primary-color);
}
.tell-us-btn-box .buy-follow-receive__btn p {
  font-size: 12px;
  font-weight: 700;
  margin-left: 20px;
}

.tell-us-btn-box .confirm-btn {
  border-radius: 15px;
  min-width: 160px !important;
  height: 25px;
  display: flex;
  justify-content: space-between;
  border: 2px solid #25a7e4;
  align-items: center;
  background-color: #fff;
}

.tell-us-btn-box .confirm-btn p {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 0;
  margin-left: 55px;
  color: #000;
}

.tell-us-btn-box .confirm-btn img {
  width: 19px;
  margin-right: 4px;
}

/* Dropdown container */
.tell-us-dropdown {
  position: relative;
  margin-left: 10%;

  height: 100px;
}

/* Dropdown button */
.tell-us-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border: 2px solid var(--primary-color); /* Blue border */
  border-radius: 20px;
  padding: 3px;
  padding-left: 30px; /* Increased padding for better match */
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-color); /* Blue text */
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
  width: 190px;
}

/* Arrow style */
.tell-us-arrow {
  width: 18px;
}

/* Dropdown menu */
.tell-us-menu {
  display: none; /* Initially hidden */
  position: absolute;
  left: 50%;
  padding: 0; /* Remove padding for tighter fit */
  z-index: 1000;
}

/* Dropdown items */
.tell-us-item {
  padding: 2px 15px;
  border: 1px solid var(--primary-color); /* Divider between items */
  color: var(--primary-color); /* Dark gray text */
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  list-style: none;
  border-radius: 25px;
  width: 240px;
}

.tell-us-item:hover {
  background-color: var(--primary-color); /* Dark gray background */
  color: #fff; /* White text */
}

.tell-us-item.active {
  background-color: var(--primary-color); /* Dark gray background */
  color: #fff; /* White text */
}

/* Dropdown menu when visible */
.tell-us-dropdown.open .tell-us-menu {
  display: block;
}

/* Container for the file upload */
.custom-upload-container {
  position: relative;
  display: inline-block;
  width: 85%;
  margin-top: 40px;
}

/* Label to mimic file upload button */
.custom-upload-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border: 1px solid #ececec;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  height: 55px;
}

/* Text inside the upload label */
.custom-placeholder-text {
  color: #bbb;
  font-size: 12px;
  flex-grow: 1;
  padding-left: 10px;
}

/* Custom upload icon styling */
.custom-upload-icon {
  width: 27px;
  height: 27px;
  object-fit: cover;
}

/* Hidden file input */
.custom-file-input {
  display: none;
}

.form-group-tell-us {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center !important;
}

.form-group-tell-us input {
  width: 85%;
}

.form-group-tell-us label {
  margin-bottom: 10px !important;
  font-size: 15px;
}

@media (max-width: 768px) {
  .tell-us-form {
    align-items: center;
    padding: 10px;
    flex-direction: column;
    gap: 30px;
  }
  .tell-us-btn-box {
    gap: 30px;
    margin-top: 50px;
  }
  .tell-us-menu {
    left: 0;
  }
}

/*--------------------Tell us Page End---------------------- */
/*--------------Confirm Transaction Page End----------------- */
.confirm-transaction-container {
  display: flex;
  width: 100%;
  max-width: 1212px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background-color: var(--white-color);
}

.confirm-transaction-form {
  background-color: #fdfbfc;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 25px;
  height: 70vh;
}

.confirm-transaction-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
}

.confirm-transaction-row {
  background-color: #fdfbfc;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  width: 100%;
}

.confirm-transaction-row:nth-of-type(1) {
  gap: 100px;
}

.confirm-transaction-container h1 {
  width: 100%;
  margin-bottom: 20px;
  text-align: start;
}

/* Style for the first column */
.confirm-transaction-column:nth-of-type(1) {
  justify-content: center;
}

/* Style for the second column */
.confirm-transaction-column:nth-of-type(2) {
  align-items: center;
}

/* Style for the third column */
.confirm-transaction-column:nth-of-type(3) {
  align-items: center;
}

/* Style for the first column */
.confirm-transaction-column:nth-of-type(1) .confirm-btn p {
  margin-left: 40px;
}

.confirm-transaction-column:nth-of-type(1) #insert-transaction-code {
  height: 27px;
}

.confirm-transaction-column:nth-of-type(1) #enter-email-input {
  height: 30px;
  margin-bottom: 30px;
}

.confirm-transaction-column:nth-of-type(1) label {
  font-size: 16px;
}

.confirm-transaction-column:nth-of-type(1) .confirm-transaction-text {
  margin-bottom: 30px;
}

.confirm-transaction-text {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 11px;
}

.confirm-transaction-fee-details {
  font-size: 15px !important;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  width: 85%;
  align-items: center;
  margin-bottom: 25px;
}

.confirm-transaction-fee-details-span {
  color: #6cb74e;
  background-color: #ffffff;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  border: var(--border);
  padding: 3px 10px;
  line-height: 1;
}

.confirm-transaction-fee-details-span01 {
  width: 40%;
  margin-bottom: 35px;
}

.confirm-transaction-fee-details-span02 {
  width: 40%;
}

.confirm-transaction-fee-text {
  font-size: 10px;
  margin: 20px 0;
  text-align: center;
  width: 90%;
}

.confirm-transaction-seller-price {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  margin: 20px auto;
}

.confirm-transaction-price {
  color: #6cb74e;
  background-color: #ffffff;
  text-align: center;
  font-size: 50px;
  font-weight: 700;
  border: var(--border);
  margin: 0 auto;
  padding: 0px 10px;
}

.confirm-transaction-column:nth-of-type(1) .confirm-transaction-btn-box {
  margin-bottom: 20px;
}

.confirm-transaction-btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  margin-bottom: 0px;
}

.confirm-transaction-btn-box .confirm-btn {
  border-radius: 15px;
  min-width: 160px !important;
  height: 25px;
  display: flex;
  justify-content: space-between;
  border: 2px solid #25a7e4;
  align-items: center;
  background-color: #fff;
}

.confirm-transaction-btn-box .confirm-btn p {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 0;
  margin-left: 55px;
}

@media (max-width: 768px) {
  .confirm-transaction-form {
    align-items: center;
    padding: 10px;
    flex-direction: column;
    gap: 30px;
    height: auto;
  }

  .confirm-transaction-btn-box {
    gap: 30px;
    margin-top: 50px;
  }

  .confirm-transaction-menu {
    left: 0;
  }

  .confirm-transaction-row {
    flex-direction: column;
    padding: 0;
  }

  .confirm-transaction-column:nth-of-type(1) {
    width: 90%;
  }

  .confirm-transaction-column:nth-of-type(3) {
    min-width: auto;
  }

  .confirm-transaction-column:nth-of-type(2) {
    width: 90%;
  }
}

/*------------Confirm Transaction Page End------------ */

/*----------Cancel Transaction Page Start-------------- */
.cancel-transaction-container {
  display: flex;
  width: 100%;
  max-width: 1330px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background-color: var(--white-color);
}

.cancel-transaction-form {
  background-color: #fdfbfc;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 1330px;
  height: 70vh;
}

.cancel-transaction-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
}

.cancel-transaction-row {
  background-color: #fdfbfc;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 80px;
  padding: 20px 40px 20px 55px;
  width: 100%;
}

.cancel-transaction-row:nth-of-type(2) {
  flex-direction: column;
  gap: 20px;
}

.cancel-transaction-container h1 {
  width: 100%;
  margin-bottom: 20px;
  text-align: start;
}

/* Style for the first column */
.cancel-transaction-column:nth-of-type(1) {
  justify-content: center;
  width: 70%;
}

/* Style for the second column */
.cancel-transaction-column:nth-of-type(2) {
  align-items: center;
}

/* Style for the third column */
.cancel-transaction-column:nth-of-type(3) {
  align-items: center;
  width: 70%;
  margin-left: -60px;
}

.cancel-transaction-column:nth-of-type(1) #name-input,
.cancel-transaction-column:nth-of-type(1) #enter-email-input {
  height: 25px;
}

.cancel-transaction-column:nth-of-type(1) label {
  margin-bottom: 20px;
}

.cancel-transaction-column:nth-of-type(1) #insert-transaction-code {
  height: 30px;
}

.cancel-transaction-column:nth-of-type(1) .confirm-btn {
  height: 30px;
}

.cancel-transaction-column:nth-of-type(1) .confirm-btn p {
  margin-left: 45px;
}

@media (max-width: 768px) {
  .cancel-transaction-row:nth-of-type(1) {
    flex-direction: column;
  }
  .cancel-transaction-form {
    width: 100%;
    height: auto;
  }
  .cancel-transaction-row {
    padding: 5px;
  }
  .cancel-transaction-row .contact-us-text {
    width: 100%;
    padding: 10px;
  }
}

/*----------------Cancel Transaction Page End---------------- */
/*-----------------If You Pay Page Start------------------- */
.if-you-pay-container {
  display: flex;
  width: 100%;
  max-width: 1312px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background-color: var(--white-color);
}

.if-you-pay-container h1 {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}

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

.commission-card {
  border: 3px solid var(--primary-color);
  border-radius: 38px;
  text-align: center;
  max-width: 280px;
  min-height: 420px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.commission-row {
  display: flex;
  justify-content: space-between;

  flex-direction: column;
  min-height: 350px;
}

.commission-card h3 {
  background-color: var(--primary-color);
  color: white;
  padding: 15px;
  border-radius: 34px 34px 0 0;
  font-size: 1.3rem;
  font-weight: 500;
}

.commission-card .highlight {
  font-size: 4rem;
  color: #00bf63;
  margin: 15px auto;
  font-weight: bold;
  position: relative;
  width: auto;
}

.commission-card .highlight::before {
  content: "";
  position: absolute;
  top: -13px;
  right: -50px;
  width: 50px; /* Width of the image */
  height: 50px; /* Height of the image */
  background-image: url(../images/fa.png);
  background-size: cover; /* Ensures the image covers the pseudo-element */
  background-repeat: no-repeat;
  transform: rotate(145deg); /* Rotates the image by 45 degrees */
  transform-origin: center; /* Sets the rotation point to the center */
  z-index: 3; /* Ensures the image does not overlap text */
}

.commission-card .details {
  font-size: 1rem;
  color: #333;
  margin: 10px 0;
  line-height: 1.3;
}

.commission-card .details .details-text {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 0.7rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 0;
}

.commission-card .details .details-price {
  color: #00bf63;
  font-weight: bold;
  font-size: 20px;
}

.commission-text {
  font-size: 16px;
  margin: 20px 0;
  text-align: center;
  font-weight: 700;
  color: var(--primary-color);
}

.commission-us-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 40px;
}

.commission-us-text {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 11px;
  margin-bottom: -10px;
}

.commission-us-btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  margin-top: 50px;
}

.commission-us-btn-box .btn {
  min-width: 200px !important;
}

@media (max-width: 768px) {
  .commission-container {
    flex-direction: column;
    gap: 20px;
  }
}

/*-----------If You Pay Page End---------------- */
/*---------------FAQ Page Start--------------- */
.faq-container {
  display: flex;
  width: 100%;
  max-width: 1212px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background-color: var(--white-color);
}

.faq-container h1 {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}

.faq-container ul li {
  font-size: var(--paragraph-font-size);
  color: var(--primary-color);
  font-weight: 400;
  margin-bottom: 5px;
}

.faq-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  margin-bottom: 120px;
}

.faq-flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.faq-flex-row {
  display: flex;
}

.faq-box {
  background-color: white;
  border-radius: 35px;
  box-shadow: -25px -12px 20px -12px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 20px;
  width: 260px;
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.faq-box img {
  width: 100px;
  margin-bottom: 10px;
}

.faq-box p {
  font-size: 1.8rem;
  font-weight: bold;
  color: #25a7e4;
  margin: 0;
}

.faq-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 60px;
  position: relative;
  width: 100%;
}

.faq-icon {
  width: 100px;
  max-width: 100%;
  height: auto; /* Maintain aspect ratio */
}

.faq-header h1 {
  font-size: 2.6rem;
  color: #25a7e4;
  margin: 0;
}

.line {
  width: 75%;
  max-width: 100%;
  height: auto; /* Maintain aspect ratio */
}

.faq-list {
  width: 100%;
}

.faq-item {
  margin-bottom: 10px;
  width: 100%;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-size: 1.6rem;
  color: #25a7e4;
  cursor: pointer;
  padding: 5px 0;
  font-weight: 700;
  outline: none;
  transition: color 0.3s;
}

.faq-question:hover {
  color: var(--primary-color);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 10px;
  border-left: 4px solid #25a7e4;
}

.faq-answer p {
  margin: 10px 0;
  font-size: 1.3rem;
  color: var(--primary-color);
  font-weight: 700;
}

/* Search Box */
.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eeeeee;
  border: none;
  border-radius: 24px;
  height: 40px;
  width: 350px;
  box-shadow: none;
  margin-left: 15px;
  margin-top: 25px;
}

.search-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 50px;
  background-color: #4285f4;
  border-radius: 50%;
  margin-left: -20px;
  margin-right: 10px;
  cursor: pointer;
}

.search-icon img {
  padding: 2px;
  width: 30px;
}

.search-input {
  border: none;
  outline: none;
  margin: 0;
  font-size: 1rem;
  color: #3c4043;
  background-color: transparent;
  width: 100%;
  height: 50px;
}

.search-input::placeholder {
  color: var(--primary-color);
  font-size: 01.5rem;
  font-weight: 400;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .faq-flex-row {
    flex-direction: column;
    gap: 20px;
  }
  .faq-header {
    flex-wrap: wrap;
  }
  .line {
    width: 100%;
  }
  .faq-header h1 {
    font-size: 1.5rem;
    width: 40%;
  }
  .faq-question {
    font-size: 1rem;
  }
  .faq-answer p {
    font-size: 1rem;
  }
  .search-container {
    width: 100%;
  }
  .search-input::placeholder {
    font-size: 1rem;
  }
}

/*------------Monitoring Transaction Page Start------- */
.monitoring-transaction-container {
  display: flex;
  width: 100%;
  max-width: 1212px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background-color: var(--white-color);
}

.monitoring-transaction-container h1 {
  width: 100%;
  margin-bottom: 20px;
  text-align: start;
}

.monitoring-transaction-form {
  background-color: #fdfbfc;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fdfbfc;

  width: 100%;
  gap: 100px;
  padding: 25px;
}

.monitoring-transaction-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.monitoring-transaction-column:nth-of-type(1) {
  flex: 1;
  align-items: flex-start;
  justify-content: flex-start;
}

.monitoring-transaction-column:nth-of-type(2) {
  flex: 2.3;
  justify-content: center;
}

.monitoring-transaction-column:nth-of-type(1) .form-group {
  width: 100%;
}

.monitoring-transaction-column:nth-of-type(1) .form-group label {
  margin-bottom: 20px;
}

.monitoring-transaction-column:nth-of-type(1) .form-group input {
  height: 30px;
}

.monitoring-transaction-column textarea {
  resize: none;
  width: 100%;
  height: 120px;
}

.monitoring-transaction-column .monitoring-transaction-title {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
  padding: 15px;
}

.monitoring-transaction-column .monitoring-transaction-amount {
  color: #6cb74e;
  background-color: #ffffff;
  text-align: center;
  font-size: 45px;
  font-weight: 700;
  border: var(--border);
  padding: 0;
  width: auto;
  margin: auto;
}

.monitoring-transaction-column .monitoring-transaction-text {
  font-size: 11px;
  margin: 20px 0;
}

.monitoring-transaction-row {
  display: flex;
  justify-content: space-between;
}

.monitoring-transaction__column {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.monitoring-transaction__column:nth-of-type(1) {
  flex: 1.4;
}

.monitoring-transaction__column:nth-of-type(2) {
  flex: 1;
}

.monitoring-transaction__column .form-group {
  width: 85%;
}

.monitoring-transaction__column .form-group label {
  width: 100%;
  text-align: center;
}

.monitoring-transaction__column .form-group input {
  height: 40px;
  border-radius: 5px;
  border: 2px solid #ececec;
}

.monitoring-transaction__column:nth-of-type(1) .confirm-box {
  display: flex;
}

.monitoring-transaction__column:nth-of-type(1)
  .confirm-box
  .receive-payment-text {
  font-size: 10px;
}

.monitoring-transaction__column:nth-of-type(1)
  .confirm-box
  .buy-follow-receive__btn {
  display: flex;
  width: 190px;
  border: 2px solid var(--primary-color);
  height: 25px;
}
.monitoring-transaction__column:nth-of-type(1)
  .confirm-box
  .buy-follow-receive__btn
  p {
  padding-left: 10px;
}

.monitoring-transaction__column:nth-of-type(2) .receive-payment-btn-box {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.monitoring-transaction__column:nth-of-type(2) .btn {
  max-width: 210px;
  width: 200px;
  font-size: 12px;
}

.mo-hight {
  margin-top: 40px;
}

.tracking-container {
  width: 100%;
  height: 180px;
  text-align: center;
  position: relative;
}

.tracking-header {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.progress-line {
  height: 121px;
  display: flex;
  align-items: center;
  position: relative;
}

/* Kept your original progress line as requested */
.progress-line::before {
  content: "";
  position: absolute;
  width: 91%;
  top: 76%;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #d3d3d3;
  z-index: 1;
  transform: translateY(-50%);
  margin: auto;
}

.step { 
  flex: 1; /* Evenly distributing steps */
  z-index: 2;
  text-align: center;
  position: relative;
}

/* Ensuring the step markers are aligned properly */
.step::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #3498db;
  border-radius: 50%;
  position: absolute;
  top: 76%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* Step images unchanged */
.step-1 img {
  width: 50px;
  height: auto;
  margin-bottom: 15px;
  margin-left: 2%;
}

.step-2 img {
  width: 120px;
  height: auto;
  margin-bottom: 15px;
}

.step-3 img {
  width: 50px;
  height: auto;
  margin-bottom: 15px;
  margin-right: -15px;
}

.step-4 img {
  width: 60px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 10px;
  margin-top: 10px;
}

.step-5 img {
  width: 50px;
  height: auto;
  margin-bottom: 18px;
}

.step-6 img {
  width: 50px;
  height: auto;
  margin-bottom: 15px;
  margin-right: -15px;
}

/* Improving first step positioning */
.step:first-child::after {
  left: 0;
  transform: translateX(50%);
}
/* Adjusting the position of the first step marker */
.step:nth-child(1)::after {
  left: 2.5%;
}

.step-3::after {
  left: 65%; /* Moves the dot slightly to the right */
}

.step-6::after {
  left: 77%; /* Moves the dot slightly to the right */
}

.step.active::after {
    background-color: green; /* Dot active */
}

.step.active p {
    font-weight: bold; /* Make the text bold */
}

.step.dispute::after {
  background-color: red;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,0,0,0.6); }
  70% { box-shadow: 0 0 0 10px rgba(255,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); }
}

/* General step paragraph styling */
.step p {
  margin: 0;
  font-size: 0.9rem;
  display: flex;
}

/* Improving text alignment for each step */
.step-1 {
  flex: 1;
  text-align: left;
  top: -5%;
}

.step-2 {
  flex: 1;
  text-align: center;
  position: absolute;
  left: 39%;
  top: 15%;
}

.step-3 {
  flex: 1;
  text-align: right;
  position: absolute;
  right: 0;
  top: 17%;
}

.step-4 {
  flex: 1;
  text-align: left;
  top: -6%;
}

.step-5 {
  flex: 1;
  text-align: center;
  position: absolute;
  left: 37%;
  top: 18%;
}

.step-6 {
  flex: 1;
  text-align: right;
  position: absolute;
  right: 0;
  top: 17%;
}

/* Standardizing flag image size */
.flag {
  width: 50px;
  height: auto;
}

/* Optimizing button container layout */
.monitoring-transaction-btn-box {
  display: flex;
  justify-content: space-evenly;
  margin: 25px 0;
  width: 95%;
  gap: 20px;
}

/* Standardizing button size */
.monitoring-transaction-btn-box .btn {
  max-width: 200px;
  width: 180px;
}


@media (max-width: 768px) {
  .monitoring-transaction-form {
    align-items: center;
    padding: 10px;
    flex-direction: column;
    gap: 30px;
  }
  .monitoring-transaction-row {
    align-items: center;
    flex-direction: column;
  }

  .step p {
    font-size: 0.6rem;
  }
  .step-1 img {
    width: 45px;
    margin-bottom: 5px;
  }
  .step-2 img {
    width: 65px;
    margin-bottom: 5px;
  }
  .step-3 img {
    width: 50px;
    margin-bottom: 5px;
  }
  .step-5 {
    left: 32%;
  }
  .step-2 {
    left: 39%;
    top: 45%;
  }
  .progress-line::before {
    width: 80%;
  }
}

/*-----------Monitoring Transaction Page End-------- */