html {
  margin: 0px;
  padding: 0px;
}
body {
  background-color: #58588a;
  margin: 0px;
  padding: 0px;
}
a {
  text-decoration: none;
}
#controls-carousel div img {
  width: auto;
  height: auto;
}
nav {
  background-color: cadetblue;
  border-radius: 7px;
  margin: 0px;
  background-image: url("../static/nav.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  animation: 80s linear infinite background-nav;
  width: auto;
  overflow: hidden;
}
@media (max-width: 768px) and (min-width: 1024px) {
  nav {
    width: auto;
    margin: 0px;
  }
  footer {
    width: 100%;
    margin: 0px;
  }
}

#logo {
  width: max(100px, 18vw);
  /* background-color: #0a0a23; */
  aspect-ratio: 35 / 4;
  height: 110px;
}

@keyframes background-nav {
  10% {
    background-position: top right;
  }
  20% {
    background-position: center left;
  }
  30% {
    background-position: center right;
  }
  40% {
    background-position: top left;
  }
  50% {
    background-position: center;
  }
  60% {
    background-position: top right;
  }
  70% {
    background-position: right bottom;
  }
  80% {
    background-position: center;
  }
}

#controls-carousel div {
  height: 410px;
}
#controls-carousel {
  height: 415px;
}
.steps {
  margin: auto;
}
@media (max-width: 768px) {
  .steps {
    margin: auto;
  }
  .step2 {
    transform: translateX(-10px);
  }
  .step3 {
    transform: translateX(-30px);
  }
  .step4 {
    transform: translateX(-50px);
  }
  .step5 {
    transform: translateX(-70px);
  }
  .step6 {
    transform: translateX(-80px);
  }
  .step7 {
    transform: translateX(-120px);
  }
  .step8 {
    transform: translateX(-145px);
  }
  nav div button {
    background: transparent;
    margin: auto;
  }
}
.containerr {
  margin: auto;
}
@media (min-width: 768px) {
  .step2 {
    transform: translateX(-20px);
  }
  .step3 {
    transform: translateX(-60px);
  }
  .step4 {
    transform: translateX(-90px);
  }
  .step5 {
    transform: translateX(-120px);
  }
  .step6 {
    transform: translateX(-150px);
  }
  .step7 {
    transform: translateX(-180px);
  }
  .step8 {
    transform: translateX(-250px);
  }
  nav div button {
    background: thistle;
  }
}
footer {
  background-color: #2a2a40;
  display: flex;
  justify-content: center;
  border-radius: 7px;
  width: auto;
  margin: 0px;
}
/*
    <?php


    if ($_POST["message"]) {


      mail(
        "emmanuelayofame@gmail.com",
        "Here is the subject line",


        $_POST["insert your message here"] . "From: emmanuelayofame@gmail.com"
      );


    }
    ?> */

footer,
footer a {
  color: #dfdfe2;
  text-decoration: none;
}
#float_contact a img {
  height: 17px;
  width: 23px;
}
address {
  text-align: center;
  padding: 0.3em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}