.page-padding {
  padding: 0 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

:root {
  --black-color: #100E0F;
  --green-color: #548184;
  --beige-color: #D1C5B7;
  --white-color: #FFFFFF;
}

body {
  margin: 0;
  box-sizing: border-box;
  color: var(--black-color);
}

hr {
  border: 0.5px solid var(--black-color);
}

a.direct-link {
  color: var(--black-color);
  padding: 0.2rem 0;
  text-decoration: none;
}

header {
  background-color: var(--white-color);;
  padding: 1rem 0;
  width: 100%;
  position: fixed;
  box-sizing: border-box;
  top: 0;
  left: 0;
  z-index: 1000;
  
  .page-padding {
    padding: 0 1rem;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .naam {
      display: none;
    }
    
    a {
      text-decoration: none;
      color: black;
      height: 100%;
  
      span {
        display: flex;
        align-items: center;
        column-gap: 0.5rem;
    
        img {
          width: 50px;
          height: 50px;
        }
    
        h2 {
          font-size: 1.5rem;
          font-weight: 700;
        }
      }
    }
  
    nav {
      height: 100%;
      display: flex;
      align-items: center;

      ul {
        display: flex;
        gap: 1rem;
        margin: 0;

        li {
          display: block;

          a {
            text-decoration: none;
            background-color: var(--green-color);
            font-size: 1.2rem;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;

            &:hover img {
              transform: rotate(10deg);
            }
    
            img {
              transition: .4s;
              width: 30px;
              height: 30px;
            }
          }
        } 

        .dropdown {
          width: 100px;
          margin-right: 1.5rem;
          

          a {
            color: white;
            width: fit-content;
            border-radius: 25px;
            height: 50px;
          }

          .dropdown-menu {

            .dropdown-item {
              text-decoration: none;
              background-color: white;
              color: var(--green-color);
              width: 100%;
              padding: 1rem;
              border-radius: 0;

              &:hover {
                background-color: #85c7cc79;
              }
            }
          }
        }
      }
  
    }
  }

}

/* Footer */

footer {
  background-color: var(--green-color);
  padding-top: 2rem;

  .page-padding {
    display: flex;
    flex-direction: column;
    gap: 1rem;

      .desktop-container {
        display: none;
      }

      .logo {
        display: flex;
        gap: 1rem;
        align-items: center;

        img {
          width: 90px;
          height: 90px; 
        }

        h2 {
          color: var(--white-color);
          font-size: 2.1rem;
          font-weight: 700;
        }
      }

      .info-socials {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
        flex-direction: column;

        .info {
          display: flex;
          width: 100%;
          justify-content: start;
          gap: 0.5rem;
          column-gap: 2rem;
          height: 100%;

          .info-item {
            display: flex;
            flex-direction: column;

            b { 
              color: var(--white-color);
              font-size: 1.5rem;
              font-weight: 700;
              font-family: 'Freight Text Pro Black', sans-serif;
            }
  
            a {
              color: var(--white-color);
              font-size: 1rem;
              text-decoration: none;
              margin: 0;
            }
          }
        }

        .socials {
          display: flex;
          column-gap: 0.5rem;
          row-gap: 1rem;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          width: 100%;

          a {
            text-decoration: none;
            background-color: var(--white-color);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              width: 30px;
              height: 30px;

              path {
                fill: var(--green-color);
              }
            }
          }
        }
      }

      .copyrigth {
        text-align: center;
        color: var(--white-color);
        padding-top: 1rem;
        padding-bottom: 2rem;
        font-weight: 700;
      }
  }
}

@media screen and (min-width: 768px) {
  header {
    .page-padding {

      .naam {
        display: inline-block;
      }

      #contact-button {
        width: fit-content;
        padding: 1rem;
        border-radius: 2rem;
        font-family: 'Avenir Bold';
        font-weight: 700;

        img {
          display: none;
        }
  
        p {
          display: block;
        }

        .dropdown {
          display: none;
          width: 50px;

          .dropdown-toggle {
            
            &::after {
              content: '...';
            }
          }
        }
      }
    }
  }

  footer {
    height: auto;
    padding: 2rem;

    .page-padding {

      .desktop-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        
        .left-section {
          display: flex;
          flex-direction: row;
          gap: 3rem;

          .desktop-logo {
            width: 120px;
            display: block;
          }

          .desktop-info {
            display: block;
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: space-between;
            gap: 1rem;
    
            h2 {
              color: var(--white-color);
              font-size: 2.1rem;
              font-weight: 700;
            }
    
            .info {
              display: flex;
              flex-direction: row !important;
              gap: 3.5rem !important;
              justify-content: space-between;
              align-items: center;
    
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              gap: 0.5rem;
              height: 100%;
    
              div.info-item {
                display: flex;
                flex-direction: column;
    
                b { 
                  color: var(--white-color);
                  font-size: 1.5rem;
                  font-weight: 700;
                  font-family: 'Freight Text Pro Black', sans-serif;
                }
      
                a {
                  color: var(--white-color);
                  font-size: 1rem;
                  text-decoration: none;
                  margin: 0;
                }
              }
            }
          }
        }

        .right-section {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: end;

          .copyrigth {
            color: var(--white-color);
            font-weight: 700;
            display: inline;
            padding: 0;
          }

          .socials {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
  
            a {
              text-decoration: none;
              background-color: var(--white-color);
              width: 65px;
              height: 65px;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;

              &:hover img {
                transform: scale(1.1);
              }
  
              img {
                width: 35px;
                height: 35px;
                transition: .3s;
  
                path {
                  fill: var(--green-color);
                }
              }
            }
          }
        }
      }
      
      .logo {
        display: none;  
      }

      .info-socials {
        display: none;
      }
    }

    .copyrigth {
      display: none;
    }
  }
}