/* Global Styles */
body {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    font-family: Arial, sans-serif; /* Set default font */
    background-color: hsl(212, 45%, 89%); /* Ice Blue background */
    height: 100vh; /* Full viewport height */
    display: flex;  
    flex-direction: column;
    text-align: center;
    color: #333; /* Dark text for contrast */
}


header, footer {
  width: 100%;
  padding: 0;
  text-align: center;
}


main {
  flex: 1; 
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 8px;
}

.qrBox {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    padding: 10px;
    text-align: center;
    width: 25%; /* Set a fixed width */
}

/* Mobile View: Adjust when screen width is less than 600px */
@media (max-width: 600px) {
  .qrBox {
      width: 80%;
      padding: 15px;
  }
}

.qrimg {
    width: 100%;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

  .qrText{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    object-fit: cover;
    text-align: center;
    flex-direction: column;
  }

  .hdr-style  {
    font-family: Outfit, sans-serif;
    font-size: 15px; /* Set font size */
    font-weight: 800; /* Options: normal, bold, lighter, etc. */
    color: #293751; /* Text color */
    text-align: center; /* Align text: left, center, right, justify */
  }

  .text-style  {
    font-family: Outfit, sans-serif;
    font-size: 11px; /* Set font size */
    font-weight: 400; /* Options: normal, bold, lighter, etc. */
    color: #5F646A; /* Text color */
    text-align: center; /* Align text: left, center, right, justify */
  }