body, html {

  margin: 0;
  background-color: #FAB700;
}

.banner {
	display: flex;
	justify-content: center;
}

.banner img {
    max-width: 70%;

}

.top-message {
    text-align: center; /* Center text horizontally */
    padding: 52px 186px; /* Vertical padding */
    font-size: 1.2em; /* Larger text */
    /* Additional styles if needed */
}

@media screen and (max-width: 600px) {
    .top-message {
     text-align: center; /* Center text horizontally */
    padding: 52px 4px; /* Vertical padding */
    font-size: 1.2em; /* Larger text */
    /* Additional styles if needed */
    }
	

}

@media screen and (min-width: 601px) {
    .top-message {
     text-align: center; /* Center text horizontally */
    padding: 52px 68px; /* Vertical padding */
    font-size: 1.2em; /* Larger text */
    /* Additional styles if needed */
    }
}

@media (min-width: 916px) {
	.top-message {
     text-align: center; /* Center text horizontally */
    padding: 52px 188px; /* Vertical padding */
    font-size: 1.2em; /* Larger text */
    /* Additional styles if needed */
    }
}

/* Responsive design adjustments for mobile devices */
@media screen and (max-width: 600px) {
    .appointment-form {
        max-width: 100%;
        margin: 0;
        padding: 10px;
    }

    .form-group {
        grid-template-columns: 1fr; /* Stack labels and inputs vertically on small screens */
    }

    .name-group {
        grid-template-columns: 1fr; /* Full width for the label on small screens */
    }

    .name-group .name-fields {
        flex-direction: column; /* Stack the name fields vertically on small screens */
        gap: 5px;
    }

    .name-group label {
        text-align: left;
    }

    button[type="submit"] {
        width: 100%;
        margin-top: 20px; /* Add some space above the submit button on small screens */
    }
}

.upload-group {
    display: grid;
    gap: 10px;
    align-items: start;
	justify-content: start;
    margin-bottom: 18px;
}

.form-group {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Adjust if necessary to fit your design */
    gap: 10px;
    align-items: start;
	justify-content: start;
    margin-bottom: 18px;
}

.form-group label {
    text-align: left;
	font-size: 14px;
	font-weight: normal;
}

.name-group label {
    text-align: left;
	font-size: 14px;
	font-weight: normal;
}

.checkbox-container label {
	text-align: left;
	font-size: 14px;
	font-weight: normal
}

.checkbox-group label {
    font-size: smaller; /* A different size for these labels */
    font-weight: normal; /* Set the weight to normal or any other desired value */
    /* Other styles */
}

.input-wrapper {
    display: flex;
    flex-direction: column;
}

.input-placeholder {
    text-align: left; /* Align the placeholder text to the left */
    font-size: smaller; /* Make the font size smaller if desired */
    color: #FAB700; /* Placeholder text color, can be light grey */
    margin-bottom: 10px; /* Space between the input and the placeholder text */
}

.input-placeholder-odd {
    order: 2; /* Ensures that the label is positioned below the input */
    margin-bottom: 10px; /* Spacing between the input and the label */
    text-align: left; /* Center the text if desired */
    font-size: smaller; /* Smaller text for the placeholder */
	color: #FAB700;
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
    .appointment-form {
        margin: 15px;
        padding: 15px;
    }
}

.appointment-button-container {
    text-align: center;
    margin: 0;
    padding: 0;
}

.appointment-button {
    background-color: rgba(20, 0, 0, 0.8);
    color: rgba(255, 251, 223, 1);
    text-align: center;
    font-size: 14px;
    padding: 1rem;
    width: 100%;
    border-radius: 0;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    box-sizing: border-box;
    display: block;
}

.appointment-button:hover {
    background-color: rgba(20, 0, 0, 0.4);
   
}

@media (min-width: 481px) {
    .appointment-button-container {
        margin-top: 38rem;
        margin-bottom: -36rem;
    }
}

@media (min-width: 916px) {
    .appointment-button-container {
        margin-top: 21rem;
        margin-bottom: -19rem;
    }
}

@media (max-width: 480px) {
    .appointment-button-container {
        margin-top: -20rem;
        margin-bottom: 22rem;
    }
}

button[disabled] {
    background-color: #ccc; /* Grey color */
    cursor: not-allowed;
}

button:not([disabled]) {
    background-color: #ffc107; /* Original color */
    cursor: pointer;
}



.image-container {
    display: flex;
    justify-content: space-around; /* aligns children (image) to the right */
    padding: 2px; /* or your desired padding */
	margin-bottom: 30px;
}

.image-container img {
	max-width: 100%;
    width: auto; /* or any specific size */
    height: auto;
}

.dafont-link,
.highlight {
  color: #FAB700;
  font-weight: bold;
}

hr {
    border-top: 2px solid #ccc; /* Sets a 2px solid line in a light gray color */
	margin-top: 40px; 
	margin-bottom: 40px; /* Adds 20 pixels of space below the horizontal rule */
}

.info-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  gap: 10px;
}

.info-fields input {
  width: 100%; /* Make inputs fill their cell */
  min-width: 0; /* Allows the input to shrink below its intrinsic size */
  max-width: 100%; /* Prevents inputs from growing beyond their cell */
}



.name-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  gap: 10px;
}

.input-fields {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Two equal columns */
  gap: 10px;
}

.name-fields input {
  width: 100%; /* Make inputs fill their cell */
  min-width: 0; /* Allows the input to shrink below its intrinsic size */
  max-width: 100%; /* Prevents inputs from growing beyond their cell */
}

.name-fields label, .name-fields input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.name-group {
   grid-area: checkboxes;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  justify-content: start; /* Align to the start of the grid area */
  margin-top: 13px;
  margin-bottom: 18px;
}

.name-fields input[type="text"] {
  flex-grow: 1;
  
  border: 1px solid #ccc;
  border-radius: 20px;
}

.name-group input[type="text"] {
  flex-grow: 1;
  
  border: 1px solid #ccc;
  border-radius: 20px;
}

.name-fields input[type="text"]:last-child {
  
  border-radius: 20px;
}

.name-group input[type="text"]:last-child {
  
  border-radius: 20px;
}

.appointment-form {
    max-width: 1024px;
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 34px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.form-submit {
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
	margin-top: -58px;
	margin-bottom: 8px;
}

.form-policy {
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
}

.form-policies {
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
	padding: 42px;
	line-height: 1.5; /* Double line spacing */
    margin-bottom: -21px; /* Space between items */
}

.form-agreement {
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
	padding: 42px;
	margin-bottom: 44px;
}


.checkbox-message {
  font-size: 14px; /* Reduces the font size to 14px */
  margin-bottom: 20px; /* Adds 20px of space below the message */
  color: #FAB700;
}

.checkbox-container label {
    color: initial; /* This sets the label color to the default */
}

.checkbox-container2 label {
    color: initial; /* This sets the label color to the default */
}

.checkbox-message2 {
  font-size: 14px; /* Reduces the font size to 14px */
  margin-top: 20px; /* Adds 20px of space below the message */
  color: #FAB700;
}

.upload-group label {
    margin-bottom: 20px; /* Adjust this value as needed */
	font-size: 14px;

}

.checkbox-flex-group2  {
  grid-area: checkboxes;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Adjust based on your design needs */
  gap: 10px;
  justify-content: start; /* Align to the start of the grid area */
  margin-top: 13px;
  
}

.checkbox-flex-group3  {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Creates three columns of equal width */
  gap: 10px; /* Adjust the gap to your preference */
}

.checkbox-flex-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates three columns of equal width */
  gap: 10px; /* Adjust the gap to your preference */
  margin-top: 20px;

}



.checkbox-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Adjust if necessary to fit your design */
  gap: 10px;
  align-items: start;
  margin-bottom: 30px;
}

.checkbox-container2 {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Adjust if necessary to fit your design */
  gap: 10px;
  align-items: start;
  margin-bottom: 30px;
}

.checkbox-group {
  display: flex;
  align-items: center;
  /* Adjust margin-left if necessary to further fine-tune alignment */
}

/* Style for the labels next to each checkbox */
.checkbox-group label {
  margin-left: 5px;
}

/* Style for all input elements and textareas */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="IG"],
input[type="age"],
input[type="size"],
input[type="tattooget"],
textarea {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Style for the checkboxes, ensure this doesn't conflict with flexbox alignment */
input[type="checkbox"] {
  margin-right: 5px; /* Adjust as needed */
}



input[type="text"],
input[type="email"],
input[type="tel"],
input[type="IG"],
input[type="age"],
input[type="size"],
input[type="tattooget"],
textarea,
.checkbox-group {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 40px;
}

input[type="checkbox"] {
    /* You may not need to adjust the margin if using flexbox alignment */
    margin-right: 5px;
}

button[type="submit"] {
    width: 100%;
    padding: 10px 20px;
    background-color: #ffc107;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 20px;
}

/* Responsive design adjustments for mobile devices */
@media screen and (max-width: 600px) {
    .appointment-form {
        max-width: 100%;
        margin: 0;
        padding: 10px;
    }

    .form-group {
        grid-template-columns: 1fr; /* Stack labels and inputs vertically on small screens */
    }

    .name-group {
        grid-template-columns: 1fr; /* Full width for the label on small screens */
    }

    .name-group .name-fields {
        flex-direction: column; /* Stack the name fields vertically on small screens */
        gap: 5px;
    }

    .name-group label {
        text-align: left;
    }

    button[type="submit"] {
        width: 100%;
        margin-top: 4px; /* Add some space above the submit button on small screens */
    }
}