body {
    margin: 0;
  padding: 0;
background:linear-gradient(0deg, rgba(115, 228, 50, 0.662), rgba(74, 218, 55, 0.767));
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(255, 255, 255, 0.5);
color: auto;
font-family: Arial, sans-serif;
text-align: center;
    }
.overlay {
background-color: rgba(255, 255, 255, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.product-grid {
background-color: auto;
display: grid;
grid-template-columns: repeat(flex);
grid-gap: 0px;
padding: 0px;
}
.product {
border-radius: 10px;
padding: 20px;
text-align: center;
}
.product-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.product-price {
font-size: 14px;
color: #333;
margin-bottom: 20px;
}
.product-image {
border-radius: 2px;
width: 10%;
height: 20px;
object-fit: cover;
margin-bottom: 20px;
}
.buy-now-btn {
background-color: darkblue;
color: #fff;
padding: 10px 20px;
border-radius: 20px;
text-decoration: none;
margin-top: 20px;
display: inline-block;
}
header {
background-color: #000000;
color: white;
padding: flex;
text-align: center;

}
.li a{
text-align: center;
float: center;
order:1;
flex-grow:1;
font-size: auto;
}


.logo {
display: flex;
align-items: center;
}
.logo img {
height: 50px;
margin-right: 10px;
}
nav li {
margin: 0 10px;
}
.li {
  text-align: center;
  max-width: 100dvw;

}
.li a{
text-align: center;
float: center;
order:1;
flex-grow:1;
font-size: auto;
}
.user {
display: flex;
align-items: center;
font-size: 1vw;
}
.user p{
  font-size: 1vw;
}

.user span {
margin-right: 5px;
}

.user a {
margin-left: 5px;
}
.header-left {
display: grid;
flex-direction: column;
align-items: center;
justify-content: center;
width: fill;
height: auto;
text-align: center;

}

.header-right {
display: grid;
flex-direction: column;
}

.ul1{ width: 100%;
border: 1px solid #c2c2c2;
display:table;
white-space:nowrap;
text-align:center;
height: fit-content;
}

.headnav {
background-color: lightskyblue;
color: auto;
padding: 3px 5px;
border-radius: 5px;
text-decoration: none;
margin: 5px;
display: inline-block;
color: auto;
font-weight: bold;
}

.headnav2 {
background-color: lightseagreen;
color: auto;
padding: 4px 12px;
border-radius: 5px;
text-decoration: none;
margin: 5px;
display: inline-block;
font-weight: bold;
}
img {
    max-width: 90dvw;
    max-height: 70dvh;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}
img:hover {
  transform: scale(1.05);
}
p {
    font-size: medium;
    line-height: 1.5;
    margin: 10px;
}
.top-up {background-color: green;
color: #fff;
padding: 10px 20px;
border-radius: 20px;
text-decoration: none;
margin-top: 20px;
display: inline-block;
}
embed, object { max-width: 90dvw; max-height: 90vh; min-width: 40dvw; min-height: 40dvh; }
footer {
    background-color: #000000;
    color: #f3eeee;
    text-align: center;
    padding: 20px 0;
  }
  
  footer p {
    margin: 0;
    font-size: 14px;
  }
  footer img{
    max-width: 30px;
    max-height: 30px;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
  }
  footer img:hover {
    transform: scale(1.05);
  }

  #invoice-container {
    max-width: 100dvw;
    margin: auto;
    padding: 20px;
}
iframe {
    max-width: 100dvw;
    min-height: 800px; /* Default height */
    border: none;
}

section{
  margin: 20px;
  font-size: medium;
  text-align: justify;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
section  h4 {
  font-size: 24px;
  font-weight: bold;
  color: #5a4800;
  margin-top: 20px;
  text-align: center;
 
}

.button:hover {
  background-color: #ffaa00;
}

.methods-container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 20px;
  scrollbar-width: none;
}
.methods-container::-webkit-scrollbar {
  display: none;
}
.method-card {
  flex: 0 0 80%;
  background: #1e1e1e;
  padding: 20px;
  border-radius: 10px;
  min-width: 300px;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
  transition: transform 0.3s;
}
.method-card:hover {
  transform: scale(1.05);
}