section {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* Initial state of the .info section - hidden */
.info {
    padding: 20px;
    /* animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; */
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    font-family: "Montserrat";
    z-index: 10;
}

.info h1 {
    overflow: hidden;
    margin: 0 auto;
    letter-spacing: .15em;
    font-family: "Montserrat";
    border-right: .15em solid orange;
    animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end;
}
/* Expanded state when the class is added */

form {
    padding: 15px;
    box-shadow: 6px 6px 25px rgb(174, 174, 174);
    margin: 30px;
    font-family: "Montserrat";
}

@media (max-width: 991.98px) {
    section {
        flex-direction: column;
    }
}



.map {
    margin: 20px;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group input {
    border-width: 1px;
    border-color: rgb(174, 174, 174);
    border-style: solid;
    border-radius: 5px;
}

#pop-up {
    display: none;
}

/*footer styling*/
footer {
  background: linear-gradient(var(--olive),var(--olive));
  margin-top: 0;
}


footer a, footer p,
.socket a, .socket p{
color: white;
font-size: .9rem;
font-weight: 300;
}

footer a:hover,
.socket a:hover{
  color: white;
}

ul.social{
  list-style-type: none;
  display: flex;
  max-width: 18rem;
  padding: 0;
  margin: 0 auto;
}

ul.social li{
  margin: 0 auto;
}

ul.social .svg-inline--fa{
font-size: 2.2rem;
}
ul.social .svg-inline--fa:hover{
  color: #d1d1d1;
  }
/*=== SOCKET ===*/
.socket {
  background-image: linear-gradient(90deg,#0ed41cef,#176f06);
  text-align: center;
  padding: 1rem;
  border-top: .05rem solid white;
}



#content-wrap{
  padding-bottom: 0px;
}

#page-container{
  position: relative;
  min-height: 100vh;
}

form button {
  background-color: rgb(4, 0, 255);
  border: none;
  border-radius: 5px;
  padding: 10px;
  color: white;

}
/* Keyframes for typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Keyframes for blink caret effect */
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  100% {
    border-color: orange;
  }
}

/* Keyframes for floating text */
@keyframes floatText {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply typing effect to the first element */
.first-animated-element {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid orange;
  animation: typing 3s steps(30) 1, blink-caret 0.75s step-end infinite;
}

/* Apply float effect to the <p> tag */
.info p {
  opacity: 0;
  animation: floatText 2s ease-out 0s forwards; /* Start immediately */
}