body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #212428;
  }
  
  #upper-section {
    background-image: url('background.png'); /* Replace with the path to your image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Set text color to contrast with the image */
    text-align: center;
    height: 33vh; /* Adjust the height as needed */
  }
  
  .rectangle-box {
    width: 1300px; /* Set the width of the box */
    height: 250px; /* Set the height of the box */
    background-color: #1F2126; /* Set the background color of the box */
    position: absolute;
    top: 37%; /* Center the box vertically in the viewport */
    left: 50%; /* Center the box horizontally in the viewport */
    transform: translate(-50%, -50%); /* Center the box using a translation transform */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #1F2126; /* Set border properties (color, width, style) */
    border-radius: 10px; /* Adjust the value to control the roundness of the corners */
    box-shadow: 3px 6px 6px 3px #1d1d1f;

  }
  .overlay-image {
    position: absolute;
    width: 11%;
    top: -40px; /* Adjust the top position */
    left: 25px; /* Adjust the left position */
    z-index: 2; /* Ensure the image is above the background */
    border: 5px solid #17191d; /* Set border properties (color, width, style) */
    border-radius: 20px; /* Adjust the value to control the roundness of the corners */
  }
  .vertical-line {
    position: absolute;
    height: 220px; /* Adjust the height of the line */
    border-left: 1px solid #acacaccb; /* Adjust the color and thickness of the line */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    top: 18px; /* Adjust the top position */
    left: 610px; /* Adjust the left position */
  }
  .role {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 65px; /* Adjust top position as needed */
    left: 236px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 20px;
    color: rgba(161, 161, 161, 0.753);
    font-family: candara;
    text-align: left;;
  }
  .name {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 24px; /* Adjust top position as needed */
    left: 380px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 39px;
    color: rgba(255, 255, 255, 0.781);
    font-family: candara;
  }
  .wordemail {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 40px; /* Adjust top position as needed */
    left: 700px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 17px;
    color: rgba(173, 173, 173, 0.781);
    font-family: candara;
  }
  .discord {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 40px; /* Adjust top position as needed */
    left: 1045px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 17px;
    color: rgba(173, 173, 173, 0.781);
    font-family: candara;
  }
  .location {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 120px; /* Adjust top position as needed */
    left: 715px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 17px;
    color: rgba(173, 173, 173, 0.781);
    font-family: candara;
  }
  .hours {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 120px; /* Adjust top position as needed */
    left: 1067px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 17px;
    color: rgba(173, 173, 173, 0.781);
    font-family: candara;
  }
  .email {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 65px; /* Adjust top position as needed */
    left: 820px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 20px;
    color: rgba(255, 255, 255, 0.781);
    font-family: candara;
  }
  .tag {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 65px; /* Adjust top position as needed */
    left: 1070px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 20px;
    color: rgba(255, 255, 255, 0.781);
    font-family: candara;
  }
  .sac {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 145px; /* Adjust top position as needed */
    left: 746px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 20px;
    color: rgba(255, 255, 255, 0.781);
    font-family: candara;
  }
  .time1 {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 140px; /* Adjust top position as needed */
    left: 1019px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 22px;
    color: rgba(255, 255, 255, 0.781);
    font-family: candara;
  }
  .time2 {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 144px; /* Adjust top position as needed */
    left: 1040px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 21px;
    color: rgba(255, 255, 255, 0.781);
    font-family: candara;
  }
  .time3 {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 138px; /* Adjust top position as needed */
    left: 1078px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 25px;
    color: rgba(255, 255, 255, 0.781);
    font-family: candara;
  }
  .time4 {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 144px; /* Adjust top position as needed */
    left: 1111px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 21px;
    color: rgba(255, 255, 255, 0.781);
    font-family: candara;
  }
  .lowtext {
    color: green;
    overflow: auto;
    position: absolute;
    top: 1000px;
  }
  @media screen and (max-width: 600px) {
    /* Adjust styles for smaller screens */
    .box-text2 {
      font-size: 200px;
    }
    .rectangle-box {
      width: 80%;
      height: 41%;

    }
    .overlay-image {
      position: absolute;
      width: 30%;
      top: -40px; /* Adjust the top position */
      left: 100px; /* Adjust the left position */
      z-index: 2; /* Ensure the image is above the background */
      border: 1px solid #17191d; /* Set border properties (color, width, style) */
      border-radius: 15px; /* Adjust the value to control the roundness of the corners */
    }
    .name {
      position: absolute; /* Set position to absolute for text positioning relative to the box */
      top: 60px; /* Adjust top position as needed */
      left: 155px; /* Adjust left position as needed */
      font-size: 25px;
      white-space: nowrap;
    }
    .role {
      top: 83px; /* Adjust top position as needed */
      font-size: 16px;
      left: 68px; /* Adjust left position as needed */
  }
  .vertical-line {
    width: 90%;
    height: 1px;
    top: 110px;
    left: 14px;
    background-color: #acacaccb; /* Color of the line */
    margin: 20px 0;        /* Margin above and below the line */
  }
  
  .email {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 160px; /* Adjust top position as needed */
    left: 103px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 12px;
    color: rgba(255, 255, 255, 0.781);
    font-family: candara;
  }
  .wordemail {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 140px; /* Adjust top position as needed */
    left: 35px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 14px;
    color: rgba(173, 173, 173, 0.781);
    font-family: candara;
  }
  .location {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 185px; /* Adjust top position as needed */
    left: 47px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 14px;
    color: rgba(173, 173, 173, 0.781);
    font-family: candara;
  }
  .sac {
    position: absolute; /* Set position to absolute for text positioning relative to the box */
    top: 205px; /* Adjust top position as needed */
    left: 58px; /* Adjust left position as needed */
    transform: translate(-50%, -50%); /* Center the text within the box */
    font-size: 12px;
    color: rgba(255, 255, 255, 0.781);
    font-family: candara;
}
.tag {
  position: absolute; /* Set position to absolute for text positioning relative to the box */
  top: 250px; /* Adjust top position as needed */
  left: 50px; /* Adjust left position as needed */
  transform: translate(-50%, -50%); /* Center the text within the box */
  font-size: 12px;
  color: rgba(255, 255, 255, 0.781);
  font-family: candara;
}
.discord {
  position: absolute; /* Set position to absolute for text positioning relative to the box */
  top: 230px; /* Adjust top position as needed */
  left: 43px; /* Adjust left position as needed */
  transform: translate(-50%, -50%); /* Center the text within the box */
  font-size: 14px;
  color: rgba(173, 173, 173, 0.781);
  font-family: candara;
}
.hours {
  position: absolute; /* Set position to absolute for text positioning relative to the box */
  top: 277px; /* Adjust top position as needed */
  left: 62px; /* Adjust left position as needed */
  transform: translate(-50%, -50%); /* Center the text within the box */
  font-size: 14px;
  color: rgba(173, 173, 173, 0.781);
  font-family: candara;
}
.time1 {
  position: absolute; /* Set position to absolute for text positioning relative to the box */
  top: 295px; /* Adjust top position as needed */
  left: 25px; /* Adjust left position as needed */
  transform: translate(-50%, -50%); /* Center the text within the box */
  font-size: 13px;
  color: rgba(255, 255, 255, 0.781);
  font-family: candara;
}
.time2 {
  position: absolute; /* Set position to absolute for text positioning relative to the box */
  top: 298px; /* Adjust top position as needed */
  left: 40px; /* Adjust left position as needed */
  transform: translate(-50%, -50%); /* Center the text within the box */
  font-size: 12px;
  color: rgba(255, 255, 255, 0.781);
  font-family: candara;
}
.time3 {
  position: absolute; /* Set position to absolute for text positioning relative to the box */
  top: 292px; /* Adjust top position as needed */
  left: 64px; /* Adjust left position as needed */
  transform: translate(-50%, -50%); /* Center the text within the box */
  font-size: 16px;
  color: rgba(255, 255, 255, 0.781);
  font-family: candara;
}
.time4 {
  position: absolute; /* Set position to absolute for text positioning relative to the box */
  top: 298px; /* Adjust top position as needed */
  left: 86px; /* Adjust left position as needed */
  transform: translate(-50%, -50%); /* Center the text within the box */
  font-size: 12px;
  color: rgba(255, 255, 255, 0.781);
  font-family: candara;
}
  }