body {
    background-image: url("./images/BackgroundImage.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;

   }

   header {
     background-color: #333;
     color: #fff;
     padding: 1rem 0;
     text-align: center;
   }

   nav ul {
     list-style: none;
     padding: 0;
     display: flex;
     justify-content: center;
     gap: 1.5rem;
   }

   nav ul li a {
     color: #fff;
     text-decoration: none;
     font-weight: bold;
   }

   section {
     max-width: 600px;
     margin: 3rem auto;
     padding: 2rem;
    
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }

   section h2 {
     text-align: center;
     margin-bottom: 1.5rem;
     color: #333;
   }

   form {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }

   label {
     font-weight: bold;
     color: #555;
   }

   input,
   textarea {
     padding: 0.75rem;
     border: 3px solid #676671;
     border-radius: 5px;
     font-size: 1rem;
     width: 100%;

   }

   input:focus,
   textarea:focus {
     outline: none;
     border-color: #007bff;
     box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
   }

   button {
     background-color: #2b2e31;
     color: white;
     padding: 0.75rem;
     border: none;
     border-radius: 5px;
     font-size: 1rem;
     cursor: pointer;
     transition: background-color 0.3s ease;
   }

   button:hover {
     background-color: #071423;
   }

   .icon-input {
     position: relative;
   }

   .icon-input i {
     position: absolute;
     top: 50%;
     left: 10px;
     transform: translateY(-50%);
     color: #888;
   }

   .icon-input input {
     padding-left: 35px;
   }

   @media (max-width: 600px) {
     section {
       margin: 1rem;
     }

     nav ul {
       flex-direction: column;
       gap: 0.5rem;
     }
   }



   .heading{
    font-size: 2rem;
    color:  white;
    font-family: Arial, Helvetica, sans-serif;
   }