.button-container {
    text-align: center;
}
.campaign-button {
  font-family: inherit; /* You can change this to match your desired font */
  font-size: 16px; /* Adjust as needed */
  color: #000; /* Text color */
  background-color: transparent; /* Background color of the button */
  border: 2px solid #000; /* Border color and width */
  border-radius: 0; /* Border radius, set to 0 for square edges */
  padding: 10px 20px; /* Padding inside the button */
  display: inline-flex; /* Use flexbox for alignment */
  margin-left: auto;
  margin-right: auto;
  align-items: center; /* Align items vertically */
  justify-content: space-between; /* Space between the icon and the plus sign */
  cursor: pointer; /* Change mouse cursor on hover */
  text-decoration: none; /* Remove text decoration for links */
  box-sizing: border-box; /* Include padding and border in the width and height */
  text-align: center
}

.button-icon {
    width: 35px; /* Adjust based on your icon size */
    height: 35px; /* Adjust based on your icon size */
    margin-right: 10px; /* Space between icon and text */
    display: block
}

.campaign-button:hover {
  background-color: #f8f8f8; /* Slightly different background on hover */
  border: 3px solid #000;
  font-family: inherit; /* You can change this to match your desired font */
  font-size: 16px; /* Adjust as needed */
  color: #000; /*
}

.campaign-button:active {
  background-color: #e0e0e0; /* Even more change on click */
}

.button-icon {
  /* Styling for the icon goes here */
  margin-right: 10px; /* Spacing between icon and text */
}

.button-plus {
  /* Styling for the plus sign goes here */
  font-weight: bold; /* Make the plus sign bold */
  font-size: 24px; /* Larger size for the plus sign */
}

.button-custom {
  color: #000000 !important;
  border: 1px solid #000000 !important;
  margin-bottom: 75px !important;
}


/* Style for the backdrop that covers the left side of the screen */
.modal-backdrop-competition {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  top: 0;
  left: 0;
  width: 50%; /* Covers 25% of the screen width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  z-index: 1000; /* High z-index to ensure it's on top of other content */
}

/* Style for the modal that covers the right side of the screen */
.modal-competition {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  top: 0;
  right: 0;
  width: 50%; /* Takes up 75% of the screen width */
  height: 100%; /* Full height */
  background-color: #fff; /* Background color for the modal content */
  z-index: 1001; /* Higher z-index than the backdrop to be on top */
  overflow-y: auto; /* Enable vertical scrolling if content is taller than the screen */
  right: 100%; /* Start off the screen */
  animation: fadeInModal 1s forwards; 
}

/* Style for the modal content */
.modal-content-competition {
  padding: 70px; /* Padding around the content */
  position: relative; /* Position relative to its normal position */
}

/* Style for the close button inside the modal */
.close {
  position: absolute; /* Absolute position relative to the modal-content */
  top: 10px; /* Distance from the top of the modal-content */
  right: 20px; /* Distance from the right of the modal-content */
  cursor: pointer; /* Changes the cursor to a pointer when hovering over the close button */
  font-size: 24px; /* Size of the close button */
  font-weight: bold; /* Make the close button bold */
}

/* Style for the button that closes the modal */
#closeModal {
  display: block; /* Display as a block-level element */
  margin-top: 20px; /* Space above the close button */
  cursor: pointer; /* Changes the cursor to a pointer when hovering over the button */
  /* Additional styles for the close button (color, padding, etc.) can go here */
}



/* Keyframes for the fade-in effect */
@keyframes fadeInModal {
  0% {
    left: 100%; /* Start off the screen to the right */
    opacity: 0; /* Start fully transparent */
  }
  100% {
    left: 50%; /* End at 25% from the right to cover 75% of the screen width */
    opacity: 1; /* End fully opaque */
  }
}

/* Media query for mobile devices */
@media (max-width: 767px) {
  .modal-competition {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    width: 100%; /* On mobile, the modal covers 100% of the width */
    top: 0; /* Ensures it's at the top */
    height: 100%; /* Ensures it covers the full height */
    right: 100%; /* Start off the screen */
    animation: fadeInModal 1s forwards; 
  }
  .modal-content-competition {
    padding: 50px; /* Padding around the content */
    position: relative; /* Position relative to its normal position */
  }

  .modal-backdrop-competition {
    display: none; /* The backdrop is not needed since the modal covers the whole screen */
  }

  @keyframes fadeInModal {
    100% {
      right: 0; /* On mobile, the modal should end flush with the right side */
    }
  }
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#numberCounter {
  font-weight: bold;
}