:root {
    --color-primary: #0073ff;
    --color-white: #e9e9e9;
    --color-black: #141d28;
    --color-black-1: #212b38;

  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  
  }
  
  html {
    color-scheme: light !important;
}
  
  body {
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
    background-image: url('../img/Page2.jpg');
    padding-top: 60px;
    overflow-x: hidden !important;
    overflow-y: auto !important;

    
    

  }
  

  .button {
    position: fixed;
    top: 3px;
    left: 880px;
    padding: 12px;
    margin: 15px;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    background-color: #0055ff;
    color: #e9e9e9;
    
  
  }
  
   .Balance{
    top: 3px;
    left: 995px;
    position: fixed;
    padding: 12px;
    margin: 15px;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    background-color: #b32e2c;
    color: #e9e9e9;
  
  
  }
  
  
  button:hover{
    background-color: blue;
    transform: scale(1.05);
  
  }
  
  
  
  
  .navbar {
    background-color: white;
    position: absolute;
    top: 45px; left: 0; right: 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    height: 70px;
    width: 95%;
    margin: 25px;
    display: flex;
    border-radius: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    z-index: 1000;
    font-size: 0.8em;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-transform: uppercase;
    font-weight: 400;
    
  
  
  
  }
  
  .logo {
    color: var(--color-black);
    font-size: 15px;
  
  }
  
  .logo span {
     color: var(--color-primary);
  
  }
  
  .navbar ul {
    list-style: none;
    display: flex;
  }
  
  .navbar ul li {
    padding: 10px 30px;
    position: relative;
  }
  
  .navbar ul li a {
    color: var(--color-black);
    text-decoration: none;
  }
  
  .navbar ul li a:hover {
    color: var(--color-primary);
  
  }
  
  .dropdown_menu {
    display: none;
  }
  
  .navbar ul li:hover .dropdown_menu {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: var(--color-white);
  
  }
  
  .dropdown_menu ul {
    display: block;
    margin: 10px;
  }
  
  .dropdown_menu ul li {
    width: 170px;
    padding: 10px;
  
  }
  
  .fa-solid {
  
    color: var(--color-black);
  
  
  }
  
  .fa-angle-right {
    float: right;
    
  }
  
  .fa-caret-down {
    float: right;
  }
  
  
  
  .dropdown_menu-1 { 
  display: none;
  
  }
  
  .hover-me:hover .dropdown_menu-1 {
  position: absolute;
  display: block;
  margin-top: -98px;
  margin-left: 145px;
  background-color: var(--color-white);
  }

.container {
  width: 95%;
  background: #0073ff;
  padding: 30px;
  margin: 30px;
  margin-top: 110px;
  border-radius: 10px;
  

}

.container h2{
  
  color: #e9e9e9;
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Montserrat';


}
  

.cash{
  width: 95%;
  background: #0073ff;
  padding: 30px;
  margin: 30px;
  border-radius: 10px;
 
  

}
.cash h3{
  font-size: 1.2em;
  color: #e9e9e9;
  padding-bottom: 20px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Montserrat';

}

.cash h4{
  padding: 20px;
  color: #e9e9e9;
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Montserrat';
}
.cash h5{
  padding: 20px;
  color: #e9e9e9;
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Montserrat';
}
.cash h6{
  padding: 20px;
  color: #e9e9e9;
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Montserrat';
}
.cash p{
  padding: 3px;
  font-size: 0.7em;
  margin-right: 20px;
  color: #e9e9e9;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 2;
  font-family: 'Montserrat';


}
.Contact {
  width: 95%;
  background: #141d28;
  padding: 60px;
  margin: 0 auto;
  border-radius: 20px;
  position: relative;



}
.Contact h7{
  padding: 25px;
  color: #e9e9e9;
  font-size: 50px;
  margin: 350px;
  background: #212b38;

}
.index-h7 {
  
  color: #e9e9e9;
  font-size: 20px;
  position: absolute;
  right: 55px;
  padding: 25px;
  background: #0073ff;
  border-radius: 25px;
  
  

}
.index-Whatsapp {
  color: #e9e9e9;
  font-size: 45px;
position: absolute;
top: 145px;
left: 85px;
background: #0073ff;
border-radius: 10px;



}
.index-TG {
  padding: 35px;
  color: #e9e9e9;
  font-size: 10px;
  position: absolute;
  top: 250px;
  right: 500px;
  background: #0073ff;
  border-radius: 35px;





}


.index-telegram {
  padding: 35px;
  color: aquamarine;
  font-size: 15px;
  position: absolute;
  top: 300px;
  right: 455px;

}
.index-number1{
  padding: 20px;
  color: aquamarine; 
  font-size: 15px;
  position: absolute;
  top: 180px;
  left: 999px;

}
.index-number2 {
  color: aquamarine;
  padding: 90px;

}

/* Footer Styles */
.footer {
  background: #222;
  color: #fff;
  padding: 15px 10px;
  text-align: center;
  margin-top: 30px;
  margin: 20px;
  border-radius: 5px;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 900px;
  margin: auto;
  padding-bottom: 20px;

}

.footer-section {
  flex: 1;
  min-width: 250px;
  padding: 10px;
}

.footer-section h3 {
  font-size: 18px;
  color: #ffcc00;
  margin-bottom: 10px;
}

.footer-section p,
.footer-section a {
  font-size: 14px;
  color: #bbb;
  text-decoration: none;
}

.footer-section a:hover {
  color: #ffcc00;
}

/* Social Media Links */
.footer-section .fab, 
.footer-section .fas {
  margin-right: 8px;
  font-size: 16px;
}

/* Footer Bottom */
.footer-bottom {
  margin-top: 10px;
  border-top: 1px solid #444;
  padding-top: 10px;
  font-size: 14px;
  color: #aaa;
}
@media (max-width: 768px ) {
  .container, .main-content {
    width: 95%;
    max-width: none;
   
  }
  
  
  
  button {
    width: 100%;
    font-size: 16px;
  
  }
  
  }




 /* Mobile Sidebar */
#mobile-nav {
  position: fixed;
  top: 0;
  left: -100%; /* Hide initially */
  width: 250px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  transition: left 0.3s ease-in-out;
  overflow-y: auto; /* Allow scrolling */
  z-index: 9999;
  padding-top: 60px;
}

/* Show Sidebar when active */
#mobile-nav.active {
  left: 0;
}



/* Sidebar Links */
#mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#mobile-nav ul li {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 15px;
}

#mobile-nav ul li a {
  color: #5ce0ea;
  text-decoration: none;
  display: block;
}

#mobile-nav ul li a:hover {
  background: #6b88fa;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px rgba(0, 123, 255, 0.5);
  
}

/* Dropdown Button */
.drop-btn {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

/* Dropdown Menu */
.sub-dropdown-menu {
  display: none; /* Initially hidden */
  padding-left: 15px;
}

.sub-dropdown-menu.active {
  display: block; /* Show when active */
}

/* Dropdown menus */
.dropdown .sub-dropdown-menu {
  display: none;
  padding-left: 20px;
}

.dropdown .sub-dropdown-menu.show {
  display: block;
}


/* Ensure Sidebar Only Appears on Mobile */
@media (min-width: 768px) {
  #menu-btn {
      display: none; /* Hide menu button on desktop */
  }
  #mobile-nav {
      display: none; /* Hide sidebar on desktop */
  }
}




 
@media (max-width: 768px) {
  .navbar {
      display: none; /* Hide desktop navbar */
  }
}





.mobile-funds-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Adjust space between button and balance */
  position: fixed;
  top: 15px;
  right: 10px;
  z-index: 999;
}




/* Ensure it's hidden on desktop */
@media (min-width: 768px) {
  .mobile-funds-container {
      display: none;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  /* Ensure container is centered */
  .container {
      width: 90%;
      margin: 0 auto;
      padding: 15px;
      text-align: center;
  }

  /* Adjust text block */
  .text {
      width: 100%;
      font-size: 13px;
      line-height: 1.5;
      text-align: center;
      padding: 2px; /* Fix alignment */
      margin: 0 auto;
  }

  /* Fix alignment for sections */
  .cash {
      width: 90%;
      margin:  20px;
      text-align: center;
      padding: 10px;
      border-radius: 5px;
      background: #0073ff;
      color: rgb(255, 255, 255);
  }

  /* Center headings */
  h2, h3, h4, h5 {
      text-align: center;
      font-weight: bold;
      margin-bottom: 10px;
      
  }

  /* Paragraph styling */
  p {
      font-size: 13px;
      line-height: 1.6;
      text-align: center;
      padding: 0 10px;
  }

  /* Fix the welcome user box */
  .welcom {
      width: 90%;
      max-width: 100%;
      margin: 0 auto;
      padding: 5px;
      border-radius: 5px;
  }
}

@media (max-width: 768px) {
  .container {
      margin-top: 35px; /* Moves the entire section further down */
      padding: 5px; /* Adjust spacing inside */
      width: 85%;
  }

  .container .text h2 {
      font-size: 18px; /* Reduce text size slightly */
      text-align: center; /* Keep text centered */
      padding: 2px; /* Increase spacing inside */
      margin-top: 5px; /* Move text inside the box down */
      
    
    
  }

  .container .text {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
}
@media (max-width: 768px) {
.logo {
  font-size: 20px; /* Increase size for better visibility */
  font-weight: bold; /* Make it stand out */
  color: #fff; /* Maintain consistency */
  text-transform: uppercase;
  display: flex; /* Ensure alignment with other elements */
  align-items: center;
  margin-left: 20px;
  padding: 25px;
}

.logo span {
  color: var(--color-primary); /* The second part of the logo in a different color */
  margin-left: 3px; /* Adjust spacing */
}
 }

/* ✅ General Logout Button Styling */
#logout-btn {
  display: block;
  width: 100%;
  max-width: 100px;
  text-align: center;
  padding: 12px;
  background-color: #ff4d4d; /* Red logout button */
  color: white;
  font-weight: bold;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 35px auto;
  font-size: 12px;
}

/* ✅ Hide Desktop Logout Button on Mobile (Without Removing It) */
@media (max-width: 768px) {
  .desktop-logout {
      visibility: hidden;
      height: 0;
      width: 0;
      overflow: hidden;
  }
}

/* ✅ Hide Mobile Logout Button on Desktop */
@media (min-width: 769px) {
  .mobile-logout {
      display: none !important; /* Hide mobile logout on desktop */
  }
}

/* ✅ Mobile Logout Button Styling */
@media (max-width: 768px) {
  .mobile-logout {
    width: 90%;  
    text-align: center;
    position: relative; /* Change from absolute to relative */
    background-color: #ff4d4d;  
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin: auto auto 5px auto; /* Push it down */
    

  }
}

/* ✅ Mobile Logout Button Hover Effect */
@media (max-width: 768px) {
  .mobile-logout:hover {
      background-color: #d32f2f; /* Darker hover effect */
    
      
  }
}

.Web-logo {
  height: 60px; /* Adjust height based on your logo */
  width: auto; /* Keeps aspect ratio */
  position: absolute; 
  top: 18px; /* Adjust positioning */
  left: 40px; /* Moves it to the right */
}

@media screen and (max-width: 768px) {
  .Web-logo {
      height: 35px; /* Smaller size for mobile */
      left: 10%; /* Adjust left position */
      width: 30%;
      border-radius: 5px;
      position: fixed;
      display: none;
  }
}

@media screen and (max-width: 768px) {
  .sidebar .add-funds-btn, 
  .sidebar .balance {
      display: none;
  }
}
 
@media screen and (max-width: 768px) {
  .top-bar {
      top: 0;
      left: 0;
      position: fixed;
      width: 100%;
      height: 60px; /* Adjust height */
      background-color: #111111; /* Background color */
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      z-index: 1000;
  }

  
  #menu-btn {
    font-size: 20px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    left: px;
     }

     /* Close Button */
     #close-btn {
      background: none;
      border: none;
      color: white;
      font-size: 18px;
      cursor: pointer;
      position: absolute;
      right: 10px;
      top: 10px;
        
  }

  .top-logo {
      height: 40px; /* Adjust size */
      width: 40%;
      margin-right: 30px;
      border-radius: 3px;
      
  }

  .funds-container {
      display: flex;  /* Use flexbox for alignment */
      align-items: center; /* Align items in the center */
      justify-content: center; /* Center them horizontally */
      gap: 8px; /* Space between buttons */
      flex-wrap: nowrap; /* Ensure they stay in one line */

  
  }

  .funds-btn {
    font-size: 12px;
    padding: 10px 8px;
    background: #2c7de1d2;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex; /* Make it flex to align text inside */
    align-items: center; /* Center text inside the button */
    justify-content: center; /* Center text */
    white-space: nowrap; /* Prevent wrapping */
    
}

 
.balance {
  font-size: 12px;
  padding: 10px 8px;
  background: red;
  color: white;
  border: none;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

  .funds-btn:hover {
    background-color: #2011c2;
  }


  .balance:hover {
      background: rgb(118, 2, 2); /* Balance in red */
  }

  a {
    text-decoration: none; /* Removes underline */
    color: inherit; /* Inherits text color from the parent element */
}





.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: auto;
 
 
}


/* Footer Styles */
.footer {
  background: #222;
  color: #fff;
  padding: 15px 20px;
  text-align: center;
  margin-top: 50px;
  border-radius: 5px;
  position: relative;
  margin-bottom: -75px !important;
  
  
  
  
  
  
  
}

 


}


@media screen and (min-width: 769px) {
  .funds-btn, .balance {
      display: none;
  }

  .top-logo{
    display: none;
  }
}

.reviews-container {
  width: 80%;
  max-width: 500px;
  margin: auto;
  padding: 20px;
}

.reviews-container h7 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  margin-left: 80px;

}
.reviews-container p {
 color: #353434cc;
}

.review-card {
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  margin: 10px 0;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
  text-align: left;
  position: relative;
}

.stars {
  font-size: 18px;
}

.filled {
  color: #121212; /* Purple for filled stars */
}

.unfilled {
  color: gray; /* Gray for unfilled stars */
}

.timestamp {
  position: absolute;
  right: 60px;
  top: 22px;
  color: #bbb;
  font-size: 12px;
}

.verified {
  color: #a855f7;
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.verified::before {
  content: "✔";
  margin-right: 5px;
}

.btn {
  margin-top: 1px;
  display: inline-block;
  background: rgba(2, 4, 141, 0.975);
  color: aliceblue;
  font-size: 12px;
  border-radius: 10px;
  padding: 5px 10px;
  margin-left: 90px;
}

 .btn:hover{
  transform: scale(1.05);
  background: blue;
  
}