@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Nunito', sans-serif}
html {scroll-behavior: smooth}
a {text-decoration: none}
.container {max-width: 1150px;margin: 0 auto}
body {background-color: #F2F2F2}
header {background: url('img/main.jpg');background-repeat: no-repeat;background-size: cover;padding: 15px 0 150px 0;background-position: center}
header img.logo {height: 90px;margin: 15px 0}
h1 {color: #1F4D35;font-size: 300%;margin: 30px 0 25px 0;font-weight: 700}
h2 {color: #1F4D35;font-size: 120%;margin: 30px 0 25px 0;font-weight: 700}

.btn {background-color: #21A265;color: #fff;padding: 15px 35px;border-radius: 5px;margin-top:25px;display: inline-block;transition: .3s ease}
.btn:hover {background-color: #1F4D35}
strong {margin: 0 0 15px 0;display: inline-block}
.desc {width: 50%;line-height: 2;margin-bottom: 25px}
.green{color: #21A265;}
.gallery {display: flex;flex-wrap: wrap;position: relative}
.gallery div {width: 25%;font-size:0;position: relative;overflow:hidden}
.gallery img {max-width: 100%;height: 100%;object-fit: cover;transition: .3s ease}
.gallery img:hover:not(footer .gallery img:hover) {transform:scale(1.05)}
.flex {display: flex;justify-content: space-between}
.contact-info {background: #21A265;color: #fff;padding: 10px 0 40px 0}
.contacts {display: flex;flex-direction: column;}
.contacts a {color:#2f2f2f;transition: .2s ease;}
.contacts a:hover {color: #21A265;}
.contacts div {display: flex;align-items: center;}
.contacts div img {margin:0 15px 5px 0}
iframe {display: block}
footer .gallery div {width: 33.33%;}
.footer-bottom {text-align: center;padding: 20px 0;background: #21A265}
.footer-bottom a {color: #1F4D35;transition: .2s ease;}
.footer-bottom a:hover {color: #fff;}

@media only screen and (max-width: 992px) {
    header {
      text-align: center;
    }
    .contacts div {
        justify-content: center;
    }

    h1 {
        margin-top: 45px;
    }

    .desc {
        width: 100%;
        padding: 0 20px;
    }
  }

  @media only screen and (max-width: 550px) {
    h1 {
        font-size: 200%;
    }

    .desc {
        width: 100%;
        padding: 0 20px;
        font-size: 80%;
    }

    .gallery div {
        width: 50%;
    }

    .gallery div p {
        font-size: 13px;
    }

    .flex {
        flex-wrap: wrap;
    }

    .contacts > div {
        width: 100%;
    }
  }


  @media only screen and (max-width: 380px) {
    .contacts > div {
        width: 100%;
        padding: 0;
    }
  }