html {
  scroll-behavior: smooth;
}
html a {
  text-decoration: none;
  color: black;
}
html a:hover {
  color: #4D903C;
}
html p {
  font-size: 12pt;
  font-family: "Spartan", sans-serif;
}
html h3 {
  font-size: 14pt;
  padding-bottom: 10px;
  text-transform: uppercase;
  color: #4D903C;
}

body {
  background-color: white;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

header {
  display: flex;
  justify-content: center;
  background-color: white;
  width: 100%;
  height: 95px;
}
header .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
}
header .wrapper .logo-container {
  width: 100px;
}
header .wrapper .logo-container img {
  width: 100%;
}
header .wrapper nav ul {
  display: flex;
  justify-content: center;
  column-gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
header .wrapper nav ul li {
  float: left;
  text-transform: uppercase;
}
header .wrapper nav ul li a, header .wrapper nav ul li a:after, header .wrapper nav ul li a:before {
  transition: 0.5s;
}
header .wrapper nav ul li a {
  position: relative;
}
header .wrapper nav ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: ".";
  color: transparent;
  background: #4D903C;
  height: 1px;
}
header .wrapper nav ul li a:hover:after {
  width: 100%;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 100%;
}
main .start {
  width: 100%;
  background-image: url(../images/houses.JPG);
  background-repeat: no-repeat;
  background-size: cover;
}
main .start .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 30vh;
  background-color: rgba(255, 255, 255, 0.35);
}
main .start .wrapper .img-container {
  width: 70%;
}
main .start .wrapper .img-container img {
  width: 100%;
}
main .content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 80px;
  width: 90%;
  margin-bottom: 50px;
}
main .content-wrapper .about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 20px;
  padding-top: 50px;
}
main .content-wrapper .about .img-box {
  width: 100%;
}
main .content-wrapper .about .img-box img {
  width: 100%;
  border-radius: 4px;
}
main .content-wrapper .contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
main .content-wrapper .contact .contact-info {
  width: 100%;
}
main .content-wrapper .contact .person-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  column-gap: 5px;
  font-size: 0.8em;
}
main .content-wrapper .contact .person-info .img-contain {
  width: 100%;
  height: 270px;
}
main .content-wrapper .contact .person-info .img-contain img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  /* object-position: 0px -15px; */
  top: 10px;
}
main .content-wrapper .contact .person-info ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
main .content-wrapper .contact .person-info .person1 {
  margin-bottom: 20px;
  width: 100%;
}
main .content-wrapper .contact .person-info .person2 {
  margin-bottom: 20px;
}
main .content-wrapper .contact .person-info .person1 img{
  object-position: 0px -40px;
  
}
main .content-wrapper .contact .person-info .person2 img{
  object-position: 0px -40px;
  
}
main .content-wrapper .contact .person-info .person3 img{
  object-position: 0px 0px;
  
}
/* main .content-wrapper .contact .person-info .person1 .img-contain img {
  margin-bottom: 20px;
} */

footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: black;
  color: white;
  height: 170px;
}
footer .footer-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
footer .footer-info a {
  font-family: "Spartan", sans-serif;
}
footer .footer-info p {
  padding: 0px;
  margin: 0px;
}
footer .caseta-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}
footer .caseta-info p {
  padding: 0px;
  margin: 0px;
}
footer a {
  color: white;
}

@media screen and (min-width: 768px) {
  header .wrapper {
    flex-direction: row;
    justify-content: space-between;
    width: 90%;
  }

  main .start .wrapper {
    height: 60vh;
  }
  main .start .wrapper .img-container {
    max-width: 33%;
  }
  main .content-wrapper {
    width: 90%;
  }
  main .content-wrapper .about {
    flex-direction: row;
    align-items: flex-start;
    column-gap: 20px;
  }
  main .content-wrapper .about .img-box {
    width: 580px;
  }
  main .content-wrapper .contact {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  main .content-wrapper .contact .person-info {
    flex-direction: row;
    justify-content: space-between;
    width: 60%;
    /* column-gap: 30px; */
  }

  main .content-wrapper .contact .contact-info {
    width: 40%;
  }

  main .content-wrapper .contact .person-info .person1 {
    width: 30%;
  }
  main .content-wrapper .contact .person-info .person2 {
    width: 30%;
  }
  main .content-wrapper .contact .person-info .person3 {
    width: 30%;
  }

  main .content-wrapper .contact .person-info .person1 img{
    object-position: center;
    
  }
  main .content-wrapper .contact .person-info .person2 img{
    object-position: center;
    
  }
  main .content-wrapper .contact .person-info .person3 img{
    object-position: center;
    
  }

  footer {
    justify-content: center;
  }
  footer .foot-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 90%;
  }
  footer .footer-info {
    align-items: flex-start;
  }
  footer .caseta-info p {
    margin: 0;
  }
}
@media screen and (min-width: 1024px) {
  header .wrapper {
    width: 950px;
  }

  main .content-wrapper {
    width: 1050px;
  }
  main .content-wrapper .about p {
    width: 500px;
  }
  main .content-wrapper .contact .person-info .img-contain {
    width: 100%;
  }

  footer .foot-wrap {
    width: 1050px;
  }
}