* {  
      margin: 0;  
      padding: 0;  
      box-sizing: border-box;  
    }  
    body {  
      font-family: 'Inter', sans-serif;  
      background: white;  
      line-height: 1.6;  
      color: #333;  
    }  
    nav {  
      background-color: #111;  
      color: white;  
      padding: 15px 20px;  
      display: flex;  
      justify-content: space-between;  
      align-items: center;  
      position: sticky;  
      top: 0;  
      z-index: 1000;  
    }  
    .logo {  
      display: flex;  
      align-items: center;  
      font-family: 'Segoe UI', sans-serif;  
      font-size: 28px;  
      font-weight: 700;  
    }  
    .logo-img {  
      height: 50px;  
      margin-right: 10px;  
    }  
    .nav-links {  
      display: flex;  
      gap: 20px;  
    }  
    .nav-links {
  display: none;
  flex-direction: column;
  background-color: #333;
  position: absolute;
  top: 60px; /* adjust based on your nav height */
  right: 0;
  width: 200px;
  z-index: 1000;
  padding: 1rem;
}

.nav-links.show {
  display: flex;
}
@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }

  .nav-links {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: none;
    width: auto;
  }
}
    .nav-links a {  
      color: white;  
      text-decoration: none;  
      font-weight: bold;  
      display: flex;  
      align-items: center;  
      gap: 4px;  
    }  
    .nav-links a img {  
      height: 20px;  
    }  
    .menu-toggle {  
      display: block;  
      font-size: 40px;  
      cursor: pointer;  
      color: white;  
    }  
    @media (max-width: 768px) {  
      .menu-toggle {  
        font-size: 40px;  
        position: fixed;  
        top: 15px;  
        right: 20px;  
        z-index: 1100;  
      }  
      .nav-links {  
        flex-direction: column;  
        background-color: #111;  
        width: 70%;  
        position: fixed;  
        font-size: 20px;  
        top: 70px;  
        left: -100%;  
        height: 100%;  
        gap: 4px;  
        padding-top: 0px;  
        transition: left 0.3s ease;  
      }  
      .nav-links.show {  
        left: 0;  
      }  
      .nav-links a {  
        padding: 5px 5px;  
        border-top: 1px solid #333;  
      }  
    }  
    @media (min-width: 769px) {  
      .menu-toggle {  
        display: none;  
      }  
    }  .container {  
  max-width: 1100px;  
  margin: 30px auto;  
  padding: 20px;  
  background: #fff;  
  border-radius: 8px;  
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);  
}  

h2 {  
  font-size: 24px;  
  margin-bottom: 20px;  
}  

.balances {  
  display: flex;  
  gap: 20px;  
  flex-wrap: wrap;  
  margin-bottom: 20px;  
}  

.balance-card {  
  flex: 1;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  padding: 20px;  
  border-radius: 8px;  
  color: #fff;  
}  

.ads-balance {  
  background: #12c28c;  
}  

.account-balance {  
  background: #0b9fe6;  
}  

.balance-card img {  
  width: 40px;  
}  

.ads-grid {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  
  gap: 20px;  
}  

.ad-card {  
  background: #fff;  
  border-radius: 8px;  
  padding: 20px;  
  text-align: center;  
  box-shadow: 0 0 10px rgba(0,0,0,0.05);  
}  

.ad-card img {  
  width: 270px;  
  margin-bottom: 10px;  
}  

.ad-meta {  
  font-size: 13px;  
  color: #666;  
  margin: 10px 0;  
  display: flex;  
  justify-content: center;  
  gap: 10px;  
}  

.ad-card button {  
  background: #007bff;  
  color: #fff;  
  border: none;  
  padding: 10px 15px;  
  border-radius: 5px;  
  font-size: 14px;  
  cursor: pointer;  
}  

.ad-card button:hover {  
  background: #005dc7;  
}  

footer {  
  background-color: #1a202c;  
  color: white;  
  padding-top: 2.5rem;  
  padding-bottom: 1.25rem;  
  margin-top: 2.5rem;  
}  

.footer-container {  
  max-width: 1120px;  
  margin: 0 auto;  
  display: grid;  
  grid-template-columns: repeat(2, 1fr);  
  gap: 2rem;  
  padding: 0 1rem;  
}  

@media (min-width: 768px) {  
  .footer-container {  
    grid-template-columns: repeat(4, 1fr);  
  }  
}  

footer h4 {  
  font-weight: bold;  
  margin-bottom: 0.75rem;  
}  

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

footer ul li a {  
  color: white;  
  text-decoration: none;  
  font-size: 0.875rem;  
}  

footer ul li a:hover {  
  text-decoration: underline;  
}  

.footer-bottom {  
  text-align: center;  
  margin-top: 2rem;  
  color: #a0aec0;  
  font-size: 0.875rem;  
  border-top: 1px solid #2d3748;  
  padding-top: 1rem;  
}  

#timerModal {  
  display: none;  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background-color: rgba(0,0,0,0.8);  
  color: white;  
  font-size: 40px;  
  justify-content: center;  
  align-items: center;  
  z-index: 2000;  
  flex-direction: column;  
}  

#customModal {  
  display: none;  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background: rgba(0,0,0,0.5);  
  z-index: 3000;  
  justify-content: center;  
  align-items: center;  
}  

#customModal > div {  
  background: #fff;  
  border-radius: 10px;  
  padding: 30px;  
  max-width: 90%;  
  width: 350px;  
  text-align: center;  
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);  
}  

#customModal p {  
  font-size: 18px;  
  color: #333;  
}  

#customModal button {  
  margin-top: 20px;  
  padding: 10px 25px;  
  background: #3498db;  
  color: white;  
  border: none;  
  border-radius: 5px;  
  font-size: 16px;  
  cursor: pointer;  
}
/* Profile Section Container */
.profile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #1a1a1a; /* Dark background for contrast */
  color: #ffffff;
  border-bottom: 1px solid #333;
}

/* Profile Image */
.profile-section img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

/* Username Styling */
.profile-section h3 {
  margin: 5px 0;
  font-size: 20px;
  font-weight: 600;
}

/* Email Styling */
.profile-section p {
  font-size: 14px;
  color: #ccc;
}
/* Default: Mobile view - show everything */
.profile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #1a1a1a;
  color: #ffffff;
}

.profile-section img,
.profile-section h3,
.profile-section p {
  display: block;
}

.profile-section img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.profile-section h3 {
  margin: 5px 0;
  font-size: 18px;
}

.profile-section p {
  font-size: 14px;
  color: #ccc;
}

/* Desktop: Show only email */
@media (min-width: 768px) {
  .profile-section img,
  .profile-section h3 {
    display: none;
  }

  .profile-section p {
    font-size: 16px;
  }
}
    .custom-alert-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .custom-alert-box {
      background: white;
      border-radius: 10px;
      padding: 50px 30px;
      text-align: center;
      max-width: 90%;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }

    .custom-alert-box p {
      font-size: 18px;
      color: #333;
      margin-bottom: 20px;
    }

    .custom-alert-box button {
      padding: 0.8rem 1.5rem;
      background-color: #10b981;
      color: white;
      font-size: 1.1rem;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .custom-alert-box button:hover {
      background-color: #1976D2;
    }
      /* Slide-in animation */
    @keyframes slideIn {
      0% {
        transform: translateY(-50px);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }