body {
    background-image: url("images/imgbak.html");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

 ul {
    /* list-style-type: none; */
    text-align: center;
    background-color: rgb(219, 30, 30);
    height: 50px;
    color: white;
    text-decoration-color: white;
    /* margin: 0; */
    /* padding: 0; */
  }
  
  /* li {
    display: inline; 
    grid-column-start: 3;
    grid-column-end: 6;
  } */

  /* .pdf {
    display: inline;
  }  */


.main1 {
    grid-column: 3;
    color: white;
    text-decoration-color: white;
    font-weight: 100px;
    font-size: medium;
    /* grid-row: 3; */
}

.main2 {
    grid-column: 4;
    text-decoration-color: white;
    color: white;
    font-weight: 100px;
    font-size: medium;
    /* grid-row: 3; */
}

.main3 {
    grid-column: 5;
    text-decoration-color: white;
    color: white;
    font-weight: 100px;
    font-size: medium;
    /* grid-row: 3; */
}

.pdf1 {
    grid-column: 3;
    /* grid-row: 4; */
    text-align: center;
    transition-duration: .1s;
    transition-property: background-color, border-color;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    border-radius: 0.125rem;
    /* border-style: solid; */
    border-width: 1px;
    border-color: #e32524;
    cursor: pointer;
    display: inline-block;
    font-size: medium;
    font-weight: 100px;
    justify-content: center;
    line-height: 1.5rem;
    /* margin: 0 1rem 1.2rem 0; */
    padding: calc(0.25rem - 1px) 1rem;
    /* text-align: center; */
    text-decoration: none;
    /* background-color: #ffffffde; */
    color: #000;
    /* font-size: unset; */
    /* font-weight: 400; */
    
}


.pdf2 {
    grid-column: 4;
    /* grid-row: 4; */
    text-align: center;

    transition-duration: .1s;
    transition-property: background-color, border-color;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    border-radius: 0.125rem;
    /* border-style: solid; */
    border-width: 1px;
    border-color: #e32524;
    cursor: pointer;
    display: inline-block;
    font-size: medium;
    font-weight: 300;
    justify-content: center;
    line-height: 1.5rem;
    /* margin: 0 1rem 1.2rem 0; */
    padding: calc(0.25rem - 1px) 1rem;
    /* text-align: center; */
    text-decoration: none;
    /* background-color: #ffffffde; */
    color: #000;
    /* font-size: unset; */
    /* font-weight: 400; */
    
}



.pdf3 {
    grid-column: 5;
    /* grid-row: 4; */
    text-align: center;
    
    transition-duration: .1s;
    transition-property: background-color, border-color;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    border-radius: 0.125rem;
    /* border-style: solid; */
    border-width: 1px;
    border-color: #e32524;
    cursor: pointer;
    display: inline-block;
    font-size: medium;
    font-weight: 300;
    justify-content: center;
    line-height: 1.5rem;
    /* margin: 0 1rem 1.2rem 0; */
    padding: calc(0.25rem - 1px) 1rem;
    /* text-align: center; */
    text-decoration: none;
    /* background-color: #ffffffde; */
    color: #000;
    /* font-size: unset; */
    /* font-weight: 400; */
}

h1 {
	text-align: center;
	margin-bottom: 20px;
  font-size: 1.5em;
  color: rgba(243, 19, 11, 0.897);
}


/* form css  */
form {




    /* Center the form on the page */
    /* margin: 0 auto; */
    /* width: 400px; */
    /* Form outline */
    /* padding: 1em; */
  border: 1px solid #ccc;
  border-radius: 1em;
  max-width: 300px;
	margin: 0 auto;
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  form li + li {
    margin-top: 1em;
  }
  
  label {
    /* Uniform size & alignment */
    display: inline-block;
    width: 90px;
    text-align: right;
    
  }
  
  input,
  textarea {
    /* To make sure that all text fields have the same font settings
       By default, textareas have a monospace font */
    font: 1em sans-serif;
  
    /* Uniform text field size */
    width: 300px;
    box-sizing: border-box;
  
    /* Match form field borders */
    border: 1px solid #999;
  }

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

/* Input fields */
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    transition: all 0.3s ease;
}

  
  input:focus,
  textarea:focus {
    /* Additional highlight for focused elements */
    border-color: #000;
  }
  
  textarea {
    /* Align multiline text fields with their labels */
    vertical-align: top;
  
    /* Provide space to type some text */
    height: 5em;
  }
  
  .button {
    /* Align buttons with the text fields */
    padding-left: 90px; /* same size as the label elements */
  }
  
  button {
    /* This extra margin represent roughly the same space as the space
       between the labels and their text fields */
    margin-left: 0.5em;
  }
  
  #feedback {
      background-color: antiquewhite;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: .5em;
      /* make this element invisible until we are ready for it */
      display: none;      
  }
  .moveDown {
      margin-top: 3em;
  }



/* Submit button */
input[type="submit"] {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: none;
    background-color: #4a90e2;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Button hover */
input[type="submit"]:hover {
    background-color: #357abd;
}

  
  
#error-message {
    display: none; /* Initially hidden */
    font-size: 24px; /* Larger text */
    color: white; /* White text */
    font-weight: bold;
    /* background-color: red; */
    /* margin: 20px; */
    margin-top: 73px;
    padding: 5px;
    border-radius: 10px; /* Rounded corners */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    /* width: 300px; */
    max-width: 300px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  }
/* 
#error-message.show {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
} */


  /* Media Querry//

  /* Default styles here */


/* Media query for mobile devices (iPhone, Android, etc.) */
@media only screen and (max-width: 600px) {
	/* Styles for mobile devices here */
	form {
		padding: 10px;
	}
	label {
		display: block;
		margin-bottom: 5px;
	}
	input[type="email"], input[type="password"] {
		width: 100%;
		padding: 5px;
		margin-bottom: 10px;
	}
}




/* Media query for tablets (iPad, Android tablets, etc.) */
@media only screen and (min-width: 601px) and (max-width: 900px) {
	/* Styles for tablets here */
	form {
		padding: 20px;
	}
	label {
		display: block;
		margin-bottom: 10px;
	}
	input[type="email"], input[type="password"] {
		width: 100%;
		padding: 10px;
		margin-bottom: 20px;
	}
}

/* Media query for laptops and desktops */
@media only screen and (min-width: 901px) {
	/* Styles for laptops and desktops here */
	form {
		max-width: 400px;
		margin: 0 auto;
		padding: 30px;
	}
	label {
		display: block;
		margin-bottom: 15px;
	}
	input[type="email"], input[type="password"] {
		width: 100%;
		padding: 15px;
		margin-bottom: 30px;
	}
}