@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  font-size: 28px;
}

#menu {
  left: 0px;
  top: 0px;
  position: fixed;
  width: 100%;
  color: black;
  background-color: #d5d5d5;
  height: 36px;
  box-shadow: 1px 0px 11px #0000009e;
}

#menu img {
  position: absolute;
  right: 0;
  top: 0;
  height: 45px;
  width: 230px;
}

#menu a {
  text-decoration: none;
  color: black;
  padding: 5px 10px;
  transition: background 0.3s ease-in-out;
}

#menu a:hover {
  background: #9d9d9d;
}

#menu a.active {
  background: #94aef5;
}

#menu li {
  list-style: none;
  display: inline;
}

        /* Basic styling */
 body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  background: linear-gradient(135deg, #ffffff, #dfe9f3); /* Soft gradient */
  color: #333;
  padding: 15px;
   
}
 .container {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
       
  /* Additional styling specific to your content */
  .highlight {
    font-weight: bold;
    color: #007bff;
    }
 .feature-list {
            list-style: disc;
            margin-left: 20px;
        }
#content {
  margin-top: 60px;
}

h1 {
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}

h2{
  margin-bottom: 30px;
}

p {
  color: #666;
  margin-bottom: 30px;
}

/* Contact form */
form {
  margin-left: 40px;
}  

form label {
    font-size: 1.2em;
    font-weight: bold;
    display: block;
    padding: 10px 0;
  }
  form input#name,
  form input#email,
  form input#subject {
    width: 400px;
    background-color: #fafafa;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    border: 1px solid #cccccc;
    padding: 5px;
    font-size: 1.1em;
  }
  form textarea#message {
    width: 500px;
    height: 100px;
    background-color: #fafafa;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    border: 1px solid #cccccc;
    margin-bottom: 10px;
    padding: 5px;
    font-size: 1.1em;
  }
  form input#submit {
    display: block;
    -webkit-border-radius: 3px; 
       -moz-border-radius: 3px;
            border-radius: 3px;
    border:1px solid #d8d8d8;
    padding: 10px; 
    font-weight:bold; 
    text-align: center; 
    color: #000000; 
    background-color: #f4f4f4;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f4), color-stop(100%, #e5e5e5));
    background-image: -webkit-linear-gradient(top, #f4f4f4, #e5e5e5);
    background-image: -moz-linear-gradient(top, #f4f4f4, #e5e5e5);
    background-image: -ms-linear-gradient(top, #f4f4f4, #e5e5e5);
    background-image: -o-linear-gradient(top, #f4f4f4, #e5e5e5);
    background-image: linear-gradient(top, #f4f4f4, #e5e5e5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f4f4f4, endColorstr=#e5e5e5);
  }
  form input#submit:hover{
    transform: scale(1.05); /* Slight zoom effect */
    transition: transform 0.2s ease-in-out; /* Smooth animation */
    cursor: pointer;
    border:1px solid #c1c1c1; 
    background-color: #dbdbdb;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(100%, #cccccc));
    background-image: -webkit-linear-gradient(top, #dbdbdb, #cccccc);
    background-image: -moz-linear-gradient(top, #dbdbdb, #cccccc);
    background-image: -ms-linear-gradient(top, #dbdbdb, #cccccc);
    background-image: -o-linear-gradient(top, #dbdbdb, #cccccc);
    background-image: linear-gradient(top, #dbdbdb, #cccccc);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#dbdbdb, endColorstr=#cccccc);
  }

/* Message flashing */
.flash {
  background-color: #FBB0B0;
  padding: 10px;
  width: 400px;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
  body {
    font-size: 16px; /* Smaller font for better readability */
    padding: 10px;
  }
  form input#name,
  form input#email,
  form input#subject,
  form textarea#message {
    width: 100%; /* Stretch inputs to fit the screen */
  }
  form input#submit {
    width: 100%; /* Make the button span the full width */
  }
}