.button-container {
    display: inline-block; /* Keeps the container inline */
    position: relative; /* You can adjust this based on your layout */
    /* Other styles as needed */
}


.custom-btn {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 
    2px 2px 0px rgba(144, 193, 238),
      7px 7px 20px 0px rgba(0, 0, 0, .1),
      4px 4px 5px 0px rgba(0, 0, 0, .1);
    outline: none;
  }

  /* 3 */
  .btn-3 {
    color: #fff;
    font-weight: 800;
    background: #31de79;
    width: 160px; /* Increased from 130px */
    height: 50px; /* Increased from 40px */
    line-height: 50px; /* Matched to the new height */
    padding: 0;
    border: none;
    /* Add font-size if needed */
    font-size: 18px; /* Optional, adjust as needed */
  }

  .btn-3 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  .btn-3:before,
  .btn-3:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: rgba(144, 193, 238);
    transition: all 0.3s ease;
  }

  .btn-3:before {
    height: 0%;
    width: 2px;
  }

  .btn-3:after {
    width: 0%;
    height: 2px;
  }

  .btn-3:hover {
    background: transparent;
    box-shadow: none;
  }

  .btn-3:hover:before {
    height: 100%;
  }

  .btn-3:hover:after {
    width: 100%;
  }

  .btn-3 span:hover {
    color: rgba(144, 193, 238);
  }

  .btn-3 span:before,
  .btn-3 span:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background: rgba(144, 193, 238);
    transition: all 0.3s ease;
  }

  .btn-3 span:before {
    width: 2px;
    height: 0%;
  }

  .btn-3 span:after {
    width: 0%;
    height: 2px;
  }

  .btn-3 span:hover:before {
    height: 100%;
  }

  .btn-3 span:hover:after {
    width: 100%;
  }

  /* Dark Mode Button Style */
body.night .custom-btn {
  color: #fff; /* Change text color to white for dark mode */
  background: #333; /* Darker background for the button */
  box-shadow: inset 2px 
  2px 2px 0px #00fffc,
    7px 7px 20px 0px rgba(0, 0, 0, .1),
    4px 4px 5px 0px rgba(0, 0, 0, .1); 
}

body.night .btn-3 {
  color: #ddd; /* Lighter text color for dark mode */
  background: #333; /* Darker background for the button */
  /* ... any other style changes for dark mode ... */
}

body.night .btn-3:before,
body.night .btn-3:after,
body.night .btn-3 span:before,
body.night .btn-3 span:after {
  background: #00fffc; /* Update to cyan color for dark mode */
}

body.night .btn-3:hover {
  background: #333; /* Slightly lighter background on hover */
  
  /* ... any other style changes for hover in dark mode ... */
}

body.night .btn-3 span:hover {
  color: #00fffc;
}



/* Style for the modal */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    pointer-events: auto;
    z-index: 10;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#jobApplicationForm label, #jobApplicationForm input, #jobApplicationForm input[type="submit"] {
    display: block; /* Makes each element take a full line */
    margin-bottom: 10px; /* Adds some space below each element */
}

#jobApplicationForm label {
    margin-bottom: 5px; /* Adjust space between label and input */
}

#jobApplicationForm input[type="text"], #jobApplicationForm input[type="email"], #jobApplicationForm input[type="file"] {
    width: 100%; /* Makes input fields take full width of their container */
    padding: 8px; /* Adds some padding inside input fields */
    box-sizing: border-box; /* Ensures padding doesn't affect the total width */
}

#jobApplicationForm input[type="submit"] {
    cursor: pointer; /* Changes cursor to pointer on hover */
    padding: 10px 15px; /* Adjusts padding for better visual */
    border: none; /* Removes border */
    border-radius: 5px; /* Rounds the corners */
}

#jobApplicationForm input[type="submit"]:hover {
    background-color: #0056b3; /* Darker background on hover */
}