@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


@font-face {
    font-family: "Blueberry Regular";
    src: url("https://db.onlinewebfonts.com/t/1288f8500e0dc889d1620f14d73aaf8e.eot");
    src: url("https://db.onlinewebfonts.com/t/1288f8500e0dc889d1620f14d73aaf8e.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/1288f8500e0dc889d1620f14d73aaf8e.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/1288f8500e0dc889d1620f14d73aaf8e.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/1288f8500e0dc889d1620f14d73aaf8e.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/1288f8500e0dc889d1620f14d73aaf8e.svg#Blueberry Regular")format("svg");
}



* {
  font-style: normal;
}

:root {
  --t : "Blueberry Regular";
  --b : "Poppins", sans-serif;
  --lightgreen : #AADFC5;
  --turq : #1D4445;
  font-size: 24px;
}


::-webkit-scrollbar {
  background-color : var(--turq);
}

::-webkit-scrollbar-thumb {
  background-color : var(--lightgreen);
}
body {
  margin : 0;
  padding : 0;
}

nav {
  position : absolute!important;
  display : flex;
  flex-direction: row;
  align-items : center;
  justify-content : space-around;
  top : 10px;
  left : 5%;
  width : 90%;
}

nav > img {
  width : 150px;
  height : auto;
}

nav > a, nav > a > p {
  text-decoration : none;
  color : white;
  font-weight : bold;
}

nav > a > button {
  color : var(--turq)!important;
  background-color : white!important;
}

#hamburger-container {
  display : none;
}

h1 {
  font-family : var(--t);
  font-size : 40px;
  font-weight : normal;
}

h2 {
  font-size : 30px;
  font-family : var(--b);
  font-weight : 900;
  text-align : center;
  color : var(--turq);
}

h3 {
  font-size : 26px;
  font-family : var(--b);
  font-weight : bold;
  text-align : center;
  color : var(--turq);
}

p, li, button {
  font-family : var(--b)!important;
  font-size : 24px;
}


header {
  height : 100vh;
  width : 100%;
  padding : 0!important;
  margin : 0!important;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  background-image: url('images/header.png');
  background-size : cover;
}

header > h2 {
  text-transform : uppercase;
  letter-spacing: 5px;
  font-weight : normal;
}

header > * {
  width : 50%;
  text-align : center;
  position: relative;
  top : 20px;
}

header > * {
  color : white;
}

button {
  font-size : 24px;
  background-color : var(--lightgreen);
  color : var(--turq);
  padding : 20px 40px;
  border : 0;
  border-radius: 50px;
  font-weight : bold;
  cursor : pointer;
}

section {
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  padding : 50px 0;
}

section > p {
  width : 50%;
  text-align : center;
}

#what-we-do {
  background-image: url('images/fish-background.png');
  background-size : cover;
}

.card-container {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : space-around;
  width : 90vw;
}

.card-container > .card {
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  width : 18vw!important;
  height : auto;
  padding : 20px;
  border-radius : 25px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  background-color : white;
}

.card > img {
  width : 90%;
  height : auto;
  margin : 0;
}

.card > * {
  text-align : center;
  color : var(--turq);
  margin : 5px 0;
}

#bring-your-garden-to-life {
  background-color : var(--turq);
}

#bring-your-garden-to-life > * {
  color : white;
}

#why-pond {
  flex-direction : row;
}

#why-pond  > div, #why-pond > img {
  width : 30%;
  height : auto;
  margin : 0 50px;
  display : flex;
  flex-direction : column;
  align-items : flex-start;
  justify-content : center;
}

#why-pond  > div > * {
  text-align : left;
  color : var(--turq);
}

.dark-button {
  color : white;
  background-color : var(--turq);
}

hr {
  border : 2px solid var(--turq);
  width : 60%;
}

.gallery-container {
  display : flex;
  flex-direction : row;
  align-items : space-around;
  justify-content : flex-start;
  width : 80%;
  flex-wrap : wrap;
}

.gallery-container > img {
  width : 25vw;
  height : 27vw;
  object-fit: cover;
  margin : 10px;
}

footer {
  padding : 50px;
  background-color : var(--turq);
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
}

footer > * {
  color : white;
}

.contact {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : center;
  width : 50%;;
}

svg {
  fill : white;
  height : 40px;
  width : 40px;
  margin : 0 20px 0 0;
}

.contact > a > p, .contact > a {
  color : white;
  text-decoration: none!important;
  font-weight : bold;
}



  @media screen and (max-width: 980px) {

    h1 {
      font-family : var(--t);
      font-size : 36px;
      font-weight : normal;
    }

    h2 {
      font-size : 24px;
      font-family : var(--b);
      font-weight : 900;
      text-align : center;
      color : var(--turq);
    }

    h3 {
      font-size : 24px;
      font-family : var(--b);
      font-weight : bold;
      text-align : center;
      color : var(--turq);
    }

    p, li, button {
      font-family : var(--b)!important;
      font-size : 20px;
    }

    #hamburger-container {
      display : block!important;
      width : 50px;
      height : 50px;
      position : absolute;
      right : 20px;
      top : 30px;
      z-index : 99!important;
    }

    .hamburger {
      width : 50px;
      height : 50px;
      transition : 0.5s ease-in-out;
      font-size : 40px;
      color : white!important;
      background-color : rgb(0,0,0,0)!important;
      border-radius : 50px;
      border : none;
      cursor : pointer;
      z-index : 98;
      line-height : 5px;
    }

    #hamburgerO {
      z-index : 99!important;
      }

    #hamburgerX {
      z-index : 98!important;
      opacity : 0;
      }

      .hamburger-open {
        opacity: 100;
        width: 50px;
        height: 50px;
      }

      .hamburger-closed {
        opacity: 100;
        width: 50px;
        height: 50px;
      }

      nav {
        width : 100%;
        height : 90vh;
        padding : 0;
        margin : 0;
        flex-direction: column;
        background-color : var(--turq);
        top : 0;
        left : -120%;
        z-index : 97;
        transition-duration : 0.5s;
      }

      header {
        height : 100vh;
        width : 100%;
        padding : 0!important;
        margin : 0!important;
        display : flex;
        flex-direction : column;
        align-items : center;
        justify-content : center;
        background-image: url('images/header.png');
        background-size : cover;
        background-position : center;
      }

      header > * {
        width : 90%;
        text-align : center;
        position: relative;
        top : 0;
        margin : 2px 0;
        color : white;
      }

      button {
        font-size : 20px;
        background-color : var(--lightgreen);
        color : var(--turq);
        padding : 10px 20px;
        margin : 10px;
        border : 0;
        border-radius: 50px;
        font-weight : bold;
        cursor : pointer;
      }

      section {
        display : flex;
        flex-direction : column;
        align-items : center;
        justify-content : center;
        padding : 50px 0;
      }

      section > p {
        width : 90%;
        text-align : center;
      }

      #what-we-do {
        background-image: url('');
      }

      .card-container {
        display : flex;
        flex-direction : column;
        align-items : center;
        justify-content : space-around;
        width : 90vw;
        height : auto;
      }

      .card-container > .card {
        display : flex;
        flex-direction : column;
        align-items : center;
        justify-content : center;
        width : 80vw!important;
        height : auto;
        padding : 20px;
        border-radius : 25px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        background-color : white;
        margin : 20px 0;
      }

      .card > img {
        width : 90%;
        height : auto;
        margin : 0;
      }

      .card > * {
        text-align : center;
        color : var(--turq);
        margin : 5px 0;
      }

      #bring-your-garden-to-life {
        background-color : var(--turq);
      }

      #bring-your-garden-to-life > * {
        color : white;
      }

      #why-pond {
        flex-direction : column;
      }

      #why-pond  > div, #why-pond > img {
        width : 90%;
        height : auto;
        margin : 20px 0;
        display : flex;
        flex-direction : column;
        align-items : center;
        justify-content : center;
      }

      #why-pond  > div > * {
        text-align : left;
        color : var(--turq);
      }

      .dark-button {
        color : white;
        background-color : var(--turq);
      }

      hr {
        border : 2px solid var(--turq);
        width : 60%;
      }

      .gallery-container {
        display : flex;
        flex-direction : column;
        align-items : center;
        justify-content : space-around;
        width : 90%;
        flex-wrap : wrap;
      }

      .gallery-container > img {
        width : 90%;
        height : auto;
        object-fit: cover;
        margin : 10px 0;
      }

      footer {
        padding : 20px;
        background-color : var(--turq);
        display : flex;
        flex-direction : column;
        align-items : center;
        justify-content : center;
      }

      footer > * {
        color : white;
      }

      .contact {
        display : flex;
        flex-direction : row;
        align-items : center;
        justify-content : center;
        width : 90%;;
      }

      svg {
        fill : white;
        height : 40px;
        width : 40px;
        margin : 0 20px 0 0;
      }

      .contact > a > p, .contact > a {
        color : white;
        text-decoration: none!important;
        font-weight : bold;
      }

  }