body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  background-color: #282c34;
  color: #FFFFFF;
}

.topnav {
  overflow: hidden;
  background-color: #444;
  margin: 0;
  padding: 0;
  width: 100vw;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 13px;
}

.topnav a:hover {
  text-decoration: underline;
}

.content {
  padding: 10px;
}

.bannercontainer {
  position: relative;
  text-align: left; /* Align text to the left */
  color: white;
  padding: 0; /* Add padding for better spacing */
  margin: 0;
}

.bannertxt {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 10%; /* Align text to the left edge */
  transform: translate(0, -50%); /* Adjust vertical alignment */
  font-size: 1.5rem; /* Increase font size for emphasis */
  line-height: 1.4;
  max-width: 50%; /* Ensure text doesn't overflow */
}

.bannerbtn {
  position: absolute;
  top: 75%; /* Adjust button position under text */
  left: 10%; /* Align with the text */
  transform: translate(0, -50%);
}


button {
  align-items: center;
  appearance: none;
  background-color: #3EB2FD;
  background-image: linear-gradient(1deg, #4F58FD, #149BF3 99%);
  background-size: calc(100% + 20px) calc(100% + 20px);
  border-radius: 100px;
  border-width: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  font-family: CircularStd,sans-serif;
  font-size: 1rem;
  height: auto;
  justify-content: center;
  line-height: 1.5;
  padding: 6px 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s,background-position .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

button:active,
button:focus {
  outline: none;
}

button:hover {
  background-position: -20px -20px;
}

button:focus:not(:active) {
  box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em;
}

/* Media query for screens smaller than 768px (tablets and small devices) */
@media only screen and (max-width: 768px) {
  .bannertxt {
    font-size: 1.2rem;  /* Slightly smaller text */
    max-width: 70%;  /* Make text area larger */
    left: 5%;  /* Adjust positioning */
  }

  .bannerbtn {
    top: 85%;  /* Adjust button position */
    left: 5%;
  }
}

/* Media query for screens smaller than 480px (mobile devices) */
@media only screen and (max-width: 480px) {
  .bannertxt {
    font-size: 1rem;  /* Smaller text */
    max-width: 90%;  /* Use most of the screen width */
    left: 5%;  /* Adjust to keep padding */
  }

  .bannerbtn {
    top: 90%;  /* Push the button lower */
    left: 5%;
    padding: 10px 15px;  /* Larger padding for mobile-friendly button */
    font-size: 0.9rem;  /* Smaller button text */
  }

  /* Adjust image to prevent overflow */
  img {
    width: 100%;  /* Full width of the screen */
    height: auto;  /* Maintain aspect ratio */
  }
}