body{
  margin: 0px;
  padding: 0;
  font: sans-serif;
} 
        .redcolor{
          background-color: red;
        }
        .darkblue{
          background-color: #00008B;
          color: white;
        }
        .whitebackground{
          background-color: white;
        }
        .greentext{
            color: green;
        }
        .lemonchiffonbackground{
          background-color: lemonchiffon;
        }
        .bluetext{
          color: blue;
        }
        .darkyellow{
          background-color: #B8860B;
        }
        .lightgrey{
          background-color: #F9F9FFA;
        }
        .redtext{
          color: red;
        }
        .yellowtext{
          color: #FDD700;
        }
        a{
          text-decoration: none;
          color: white;
        }
        .Logindiv{
            margin: 70px;
        }
        .navbar a:hover{
          color: white;
          background-color: green;
        }
        i{
          color: #FDD700;
        }
        .navbar {
            /*overflow: hidden;*/
            position: sticky;
            top: 0;
            background-color: #00008C;
        }

        /* Navigation links for large screens */
        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* Menu icon for small screens */
        .navbar .icon {
            float: right;
            display: none;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            cursor: pointer;
        }

        /* Responsive navigation links */
        @media screen and (max-width: 600px) {
            .navbar a:not(.icon) {
                display: none;
            }
            .navbar a.icon {
                display: block;
            }
            .navbar.responsive a.icon {
                position: absolute;
                top: 0;
                right: 0;
            }
            .navbar.responsive a {
                float: none;
                display: block;
                text-align: left;
            }
        }
        span{
          padding: 16px;
          font-size: 24px;
        }
        span:hover{
          background-color: green;
        }

        .container {
            display: flex;
            flex-direction: row; /* Display items side by side on larger screens */
/*            background-color: #FDD700;*/
        }
        .lgtopic{
          font-size: 40px;
          color: red;
        }
        .lgrequest{
          background-color: red;
          color: white;
          font-size: 16px;
          max-width: 75%;
          text-align: center;
        }
        .text {
            flex: 1; /* Allow text to grow and take up remaining space */
            font-size: 20px;
            padding: 15px;
        }

        .image img {
            flex: 1; /* Allow image to grow and take up remaining space */
            max-width: 100%;
            max-height: auto; 
            position: relative;
        }

        /* On small screens, stack items vertically */
        @media screen and (max-width: 600px) {
            .container {
                flex-direction: column;
            }
        }
        .centert{
          text-align: center;
          font-size: 27px;
          border-bottom: 1px solid;
        }
        .whoweare{
          margin-left: 25px;
          margin-right: 25px;
        }


          .container {
            display: flex;
            flex-wrap: wrap; /* Allow sub-divs to wrap on smaller screens */
            justify-content: space-between; /* Space between sub-divs */
        }

        .subdiv {
            flex: 1; /* Each sub-div takes up an equal portion of the container */
            padding: 10px;
            text-align: inherit;
/*            border: 1px solid #ddd;*/
            margin: 5px;
        }

        .subdiv img {
            max-width: 100%; /* Image size respects the sub-div size */
        }

        /* On smaller screens, prevent wrapping and display in a single row */
        @media screen and (max-width: 600px) {
            .container {
                flex-wrap: nowrap;
            }
        }
        #feedback{
          border-radius: 50%;
          max-width: 70px;
          max-height: 70px;
        }
          /* Gallery grid styles */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-gap: 10px;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }

        /* Individual image styles */
        .gallery img {
            width: 100%;
            height: auto;
            display: block;
        }
       
        ol{
          text-align: inherit;
        }
        li{
          text-align: inherit;
        }
        .larger{
          padding: 5px;
          font-size: 20px;
          text-align: inherit;
        }
        .bigp{
          margin-left: 30px;
        }

/*        Froms designs*/

           * {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;  
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}
select {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}
textarea {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

button {
  background-color: #04AA6D;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #04AA6D;
}

.track{
  text-align: inherit;
  padding: 2px;
  border: 1px solid;
  font-size: 18px;

  font-family: Arial, Helvetica, sans-serif;
}
label{
    font-weight: bold;
    text-align: inherit;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}