/* Reset some default styles for better consistency */
body {
  font-family: Arial, sans-serif; /* Sets the font family for the entire page */
  background-color: #f4f4f4; /* Sets the background color of the page */
  color: #333; /* Sets the text color */
  margin: 0; /* Removes default margin */
  padding: 0; /* Removes default padding */
  box-sizing: border-box; /* Includes padding and border in the total width/height of an element */
}

/* Apply a max-width to the main content area for better readability on larger screens */
main {
  max-width: 800px; /* Sets the maximum width of the main content area */
  margin: auto; /* Centers the main content area horizontally */
  padding: 20px; /* Adds padding to the main content area */
  background-color: #fff; /* Sets the background color of the main content area */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Adds a subtle box shadow to the main content area */
}

/* Styling for the header section */
header {
  text-align: center; /* Centers the text in the header */
  background-color: #0066cc; /* Sets the background color of the header */
  color: #fff; /* Sets the text color in the header */
  padding: 10px; /* Adds padding to the header */
}

/* Styling for the Annual Pay Calculator section */
.annual_Pay {
  display: flex; /* Enables flexbox layout for the container */
  flex-direction: column; /* Arranges child elements in a column */
  align-items: center; /* Centers child elements horizontally */
  justify-content: center; /* Centers child elements vertically */
  text-align: center; /* Centers text within the container */
  background-color: #fff; /* Sets the background color of the container */
  padding: 30px; /* Adds padding to the container */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Adds a subtle box shadow to the container */
  border-radius: 8px; /* Adds rounded corners to the container */
  max-width: 300px; /* Sets the maximum width of the container */
  margin: auto; /* Centers the container horizontally */
  margin-top: 20px; /* Adds margin on top for vertical centering */
  font-size: 20px; /* Sets the font size of the text within the container */
}

/* Styling for the input fields within Annual Pay Calculator */
.annual_Pay input {
  border: 2px solid #6ab4fd; /* Sets a border around the input fields */
  border-radius: 20px; /* Adds rounded corners to the input fields */
  width: 100%; /* Sets the width of the input fields to 100% */
  padding: 12px 8px; /* Adds padding to the input fields */
  margin-bottom: 16px; /* Adds margin at the bottom of the input fields */
  box-sizing: border-box; /* Includes padding and border in the total width/height of the input fields */
  font-size: 18px; /* Sets the font size of the text within the input fields */
}

/* Styling for the Hourly Pay Calculator section */
.Hourly_Pay_Calculator {
  display: flex; /* Enables flexbox layout for the container */
  flex-direction: column; /* Arranges child elements in a column */
  align-items: center; /* Centers child elements horizontally */
  justify-content: center; /* Centers child elements vertically */
  text-align: center; /* Centers text within the container */
  background-color: #fff; /* Sets the background color of the container */
  padding: 30px; /* Adds padding to the container */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Adds a subtle box shadow to the container */
  border-radius: 8px; /* Adds rounded corners to the container */
  max-width: 300px; /* Sets the maximum width of the container */
  margin: auto; /* Centers the container horizontally */
  margin-top: 10px; /* Adds margin on top for vertical centering */
  font-size: 20px; /* Sets the font size of the text within the container */
}

/* Styling for the input fields within Hourly Pay Calculator */
.Hourly_Pay_Calculator input {
  border: 2px solid #6ab4fd; /* Sets a border around the input fields */
  border-radius: 20px; /* Adds rounded corners to the input fields */
  width: 100%; /* Sets the width of the input fields to 100% */
  padding: 12px 8px; /* Adds padding to the input fields */
  margin-bottom: 16px; /* Adds margin at the bottom of the input fields */
  box-sizing: border-box; /* Includes padding and border in the total width/height of the input fields */
  font-size: 18px; /* Sets the font size of the text within the input fields */
}

/* Styling for common title styles used in different sections */
.annual_pay_title,
.net_Annual_pay_title,
.horuly_Pay_title {
  font-size: 24px; /* Sets the font size of the titles */
  font-weight: bold; /* Sets the font weight to bold for the titles */
  margin-bottom: 10px; /* Adds margin at the bottom of the titles */
}

/* Styling for the Net Annual Pay Calculator section */
.netPay {
  display: flex; /* Enables flexbox layout for the container */
  flex-direction: column; /* Arranges child elements in a column */
  align-items: center; /* Centers child elements horizontally */
  justify-content: center; /* Centers child elements vertically */
  text-align: center; /* Centers text within the container */
  background-color: #fff; /* Sets the background color of the container */
  padding: 30px; /* Adds padding to the container */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Adds a subtle box shadow to the container */
  border-radius: 8px; /* Adds rounded corners to the container */
  max-width: 300px; /* Sets the maximum width of the container */
  margin: auto; /* Centers the container horizontally */
  margin-top: 20px; /* Adds margin on top for vertical centering */
  font-size: 20px; /* Sets the font size of the text within the container */
}

/* Styling for input fields within Net Annual Pay Calculator */
.netPay input {
  border: 2px solid #6ab4fd; /* Sets a border around the input fields */
  border-radius: 20px; /* Adds rounded corners to the input fields */
  width: 100%; /* Sets the width of the input fields to 100% */
  padding: 12px 8px; /* Adds padding to the input fields */
  margin-bottom: 16px; /* Adds margin at the bottom of the input fields */
  box-sizing: border-box; /* Includes padding and border in the total width/height of the input fields */
  font-size: 18px; /* Sets the font size of the text within the input fields */
}

/* Styling for labels within Net Annual Pay Calculator */
.netPay label {
  width: 100%; /* Sets the width of the labels to 100% */
  padding: 5px 2px; /* Adds padding to the labels */
  margin-bottom: 16px; /* Adds margin at the bottom of the labels */
  box-sizing: border-box; /* Includes padding and border in the total width/height of the labels */
}

/* Styling for the footer section */
footer {
  text-align: center; /* Centers the text in the footer */
  background-color: #0066cc; /* Sets the background color of the footer */
  color: #fff; /* Sets the text color in the footer */
  padding: 5px; /* Adds padding to the footer */
  position: fixed; /* Fixes the position of the footer at the bottom of the viewport */
  bottom: 0; /* Aligns the bottom edge of the footer with the bottom edge of the viewport */
  width: 100%; /* Sets the width of the footer to 100% */
}

/* Styling for links within the footer */
footer a {
  color: #fff; /* Sets the text color of the links in the footer */
  text-decoration: none; /* Removes underlines from the links */
  margin: 0 10px; /* Adds margin around the links */
}

/* Styling for the social links section in the footer */
.social-links {
  display: flex; /* Enables flexbox layout for the container */
  justify-content: center; /* Centers child elements horizontally */
  margin-top: 5px; /* Adds margin at the top of the container */
}