@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*{padding:  0;margin: 0;box-sizing: border-box;}
html, body {
  height: 100%;
  scroll-behavior: smooth;
}
body {font-family: 'Roboto', sans-serif;background-color: #cceff1;}
a {text-decoration: none;}
header {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
nav {
  width: 994px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
nav ul li {
  display: inline-block;
  color: #32cacd;
  padding: 58px 0;
  margin: 0 8px;
}
nav ul li:hover {
  transform: scale(1.2);
  transition: linear .2s;
}
#tabs{
  width: 20%;
  text-align: center;
  border-right: 2px solid #32cacd;
  color: #32cacd;
}
.selected {
  background: #32cacd;
  color: #fff;
}
#tabs ul li {
  
  cursor: pointer;
  user-select: none;
  padding: 10px;
  margin: 0 0 8px 0;
  list-style: none;
  text-align: left;
}

#social-media {
  position: fixed;
  bottom: 25px;
  right: 25px;
  font-size: 28px;
  z-index: 99985;
}
.media-icon {
  color: #fff;
  background: #000;
  padding: 5px 8px;
  border-radius: 100%;
}
.yt {background: #f00;padding: 5px}
.fb {background: #4267B2;}
.insta {background: #d62977}
#contact {
  width: 100%;
  height: 100%;
  background-color: #cceff1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-title {
  font-size: 36px;
  color: #5c3109;
}
.c-subtitle {font-size: 16px;color: #5c3109;}
#form-bg, #form2-bg, #form3-bg {
  display: block;
  text-align: center;
  padding: 10px;
  width: 50%;
  border-radius: 6px;
  background: none;
}
#form-bg .c-title, #form2-bg .c-title {
    margin-top: 250px;
}
#form2-bg,#form3-bg {display: none;}
form {
  width: 100%;
  margin-top: 25px;
  margin-bottom: 50px;
  background: #32cacd;
  border-radius: 6px;
  padding: 5%;
  position: relative;
}
.field {
  padding: 8px;
  border: none;
  border-radius: 6px;
  display: inline-block;
  width: 100%;
  margin: 5px 0;
}
textarea {
  width: 100%;
  padding: 12px;
  font-family: 'Roboto', sans-serif;
  border: none;
  resize: none;
  border-radius: 6px;
  margin: 5px 0 45px 0;
  height: 100px;
}
.btn {
  width: 150px;
  background: none;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  border: 2px solid #fff;
  padding: 8px;
  cursor: pointer;
}
.btn:hover {
  background: #fff;
  color: #32cacd;
  transition: linear .2s;
}
#logo {
  width: 380px;
  height: 150px;
  margin-top: 15px;
  background-image: url('../img/logo2.png');
  background-position: center center;
  background-size: cover;
}
#form-2 {
  background: #eecfdf;
}
footer {
  width: 100%;
  text-align: center;
  color: #fff;
  background: #32cacd;
  padding: 12px;
  position: fixed;
  bottom: 0;
}
.alert {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px;
    background: #32cacd;
    z-index: 999;
}
.alert p {text-align:center;color:#fff;}

@media only screen and (max-width: 900px) {
  body {background: #cceff1;}
  ul {width: 100%;display: none;position: fixed;left: 0;top: 0;background: #cceff1;}
  nav {display: block;width: 100%;}
  nav ul li {display: block;border-bottom: 1px solid #32cacd}
  header {width: 100%;}
  .container-banner {width: 100%;}
  .container{width: 100%;display: flex;flex-direction: column;}
  .center {position: relative;width: 100%;margin-top: 150px;padding-bottom: 150px}
  figcaption {width: 100%;}
  #banner {height: 100%;flex-direction: column;}
  #text-box {width: 100%;}
  #menu-ul {background: #cceff1;color: #32cacd}
  #menu-ul li {border-color: #32cacd}
  #tabs {width: 100%;display: block;position: absolute;top: -50px}
  #tabs ul {display: block;position: relative;width: 100%;}
  #logo {width: 280px;
    height: 100px;}
    #hamb {
    display: block;
    width: 64px;
    height: 64px;
    background: url('../img/hamb.webp') center center;
    background-size: cover;
    margin-left: auto;
    position: fixed;
    right: 25px;
    top: 25px;
    z-index: 999;
  }
  #contact {
    flex-direction: column;
    margin-top: 180px;
  }
  #form-bg,#form2-bg, #form3-bg {width: 100%;margin: 280px 0 180px 0;}

}