/* Add this at the top of your CSS file to import Poppins from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Define color palette */
:root {
  --base-color: #00b1fe;
  --darker-less-saturated: #007dc1;
  --lighter-more-saturated: #33a8ff;
  --darker-shade: #005a8e;
  --lighter-shade: #66c7ff;
  --deepest-darker-shade: #002c4a;
}

/* Base layout styles */
body {
  font-family: 'Poppins', sans-serif; /* Using Poppins font */
  line-height: 1.6;
  color: var(--darker-shade); /* Updated text color */
  background-color: var(--deepest-darker-shade); /* Using the deepest, darker shade for background */
  margin: 0;
  padding: 0;
  font-size: 18px; /* Larger body text */
}

.container {
    width: 90%; /* Full width of the container */
    max-width: 1000px; /* Maximum width of the content */
    margin: 0 auto; /* Center the container */
    padding: 0 20px; /* Optional: Add some padding on the inside */
    overflow: hidden; /* In case of overflow, it will be hidden */
  }

/* Header styles */
header {
  background: var(--base-color); /* Updated header background color */
  color: #000; /* White text for contrast */
  padding: 20px;
  text-align: center;
}

header h1 {
  margin: 0;
}

/* List styles */
ul {
  list-style: none;
  padding: 0;
}

.list-item {
  background-color: #e5f7ff; /* Updated list item background color */
  border-left: 5px #000; /* Updated border color */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  padding: 20px;
  border-radius: 4px;
}

.list-item h2 {
  color: #000000; /* Updated heading color */
  margin: 0 0 10px 0;
}

.list-item p {
  color: var(--deepest-darker-shade); /* Updated paragraph color for better readability */
  line-height: 1.5;
}

/* Link and Button styles */
a, .button {
  color: var(--base-color); /* Updated link color */
  text-decoration: none;
  transition: background-color 0.3s ease;
}

a:hover, .button:hover {
  text-decoration: underline;
}

.button { /* Styling for button */
  display: inline-block;
  background-color: var(--darker-less-saturated); /* Updated button background color */
  color: #fff; /* White text for the button */
  padding: 10px 20px;
  margin-top: 10px; /* Add some space above the button */
  border: none;
  border-radius: 5px;

cursor: pointer;
font-size: 1em;
text-align: center;
}

.button:hover {
background-color: var(--darker-shade); /* Darker blue on hover */
}

/* Footer styles /
footer {
background: var(--lighter-more-saturated); / Lighter, more saturated blue for footer /
color: var(--deepest-darker-shade); / Text color for footer */

form {
  background: #fff; /* Form background color */
  padding: 20px; /* Form padding */
  border-radius: 5px; /* Border radius for the form */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
  max-width: 600px; /* Maximum width of the form */
  margin: 20px auto; /* Centering the form with auto margins */
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: calc(100% - 20px); /* Full width minus padding */
  padding: 10px; /* Padding inside text fields */
  margin-bottom: 10px; /* Margin to the bottom of each field */
  border: 1px solid #ccc; /* Border color */
  border-radius: 4px; /* Border radius for the fields */
  font-family: 'Poppins', sans-serif; /* Poppins font */
}

input[type="submit"] {
  background-color: var(--base-color); /* Submit button background color */
  color: #fff; /* Submit button text color */
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif; /* Poppins font */
}

input[type="submit"]:hover {
  background-color: var(--darker-less-saturated); /* Darker on hover */
}

/* Custom Checkbox Styles */
.checkbox-container {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #eee;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* On mouse-over, add a background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: var(--lighter-shade);
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: var(--base-color);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}