/* Main container styles */
.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  background-color: #0099D6;
  

/* Counter Main */
#counter-main {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: center;
  align-items: center;
  
  width: 90%; /* Responsive width */
  max-width: 1000px;
  padding: 20px;
 
}

/* Counter Banner */
#counter-banner {
  font-size: 7vw; /* Responsive font size */
  font-weight: bold;
  letter-spacing: 10px;
  color: #000;
  text-align: center;
  font-family: 'Gotham Ultra', sans-serif; 
  background: url("https://www.concentricusa.com/hubfs/PowerHIVE%20counter%20background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-style: solid;
  border-width: 5px;
  width: 100%;
  padding: 15px 10px; 
  margin-bottom: 10px; /* Space between banner and counter */
  border-radius: 5px;
}

/* Battery Reload Counter */
#battery-reload-counter {
  font-size: 2vw; /* Responsive font size */
  font-weight: 400;
  font-family: 'Gotham Ultra', sans-serif; 
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  background-color: #000000;
  border-radius: 5px;
}

/* Responsive Styles for Smaller Screens */
@media screen and (max-width: 750px) {
  #counter-main {
    width: 95%;
  }

  #counter-banner {
    font-size: 5vw; /* Increase font size for smaller screens */
    padding: 10px;
  }

  #battery-reload-counter {
    font-size: 5vw; /* Increase font size for readability */
    padding: 8px;
  }
}