/* common */

body {
  max-width: 1000px;;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

h1,h2 {
  margin: 0;
  padding: 16px;
  font-weight: normal;
  color: #22577a;
}

h1 {
  font-weight:bold;
  font-size: 36px;
  text-align: center;
}

p {
  margin: 0;
  color: #22577a;
  line-height: 1.6;
}

p + p {
  margin-top: 16px;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.btn {
  display: block;
  width: 160px;
  background: #329e00;
  color: #fff;
  text-align: center;
  padding: 8px 0;
  border-radius: 4px;
  font-weight: bold;
}
.btn2 {
  display: block;
  width: 160px;
  background: #ccc;
  color: #000;
  text-align: center;
  padding: 4px 0;
  border-radius: 2px;
  font-weight: normal;
}
.container2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container2:hover
{
  cursor: pointer;
}
/* .container {
  width: calc(100% - 32px);
  margin: 0 auto;
  max-width: 800px;
  display: flex;
  gap: 64px;
  justify-content: center;
  align-items: center;

} */


/* header */
header {
  padding: 10px 0;
  /* background: #ffa; */
}
/* contactus */
#contactus {
  padding: 16px;
  background-color: #ddd;
  text-align: left;
}
#contactus.hidden {
  display: none;
}
#contactus textarea {
  width: 50%;
  height: 100px;
}
/* hero */
.hero {
  padding: 16px;

  background-color: #99e6ff;
  background-position: center bottom;
  text-align: center;
}
.hero2 {
  padding: 16px;

  background-color: #99ffd576;
  background-position: center bottom;
  text-align: center;
}
.hero3 {
  padding: 16px;

  background-color: #e9c0f5ae;
  background-position: center bottom;
  text-align: center;
}

.hero .desc, .hero2 .desc, .hero3 .desc {
  padding: 16px,16px; 
  text-align: left;
}
.hero .btn, .hero2 .btn, .hero3 .btn {
  margin: 32px auto 0;
}
.hero .pic, .hero2 .pic, .hero3 .pic {
  padding: 32px;
}

  
/* copyright */
  
.copyright {
  background: #323435;
  padding: 32px;
  text-align: center;
}
  
.copyright small {
  font-size: 16px;
  color: #eee;
}
  
/* large screen */
  
@media (min-width: 800px) {
  
  .container {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: center;
  }

  .hero .pic,.hero2 .pic, .hero3 .pic {
    width : 40%;
    height :auto;
  }

  .hero2 pic {
    order: -1;
  }
  .hero .desc, .hero2 .desc, .hero3 .desc {
    flex: 1;
    padding: 16px,16px; 
    text-align: left;
  }
    
}