:root{
    --primary-green: #13968d;
    --primary-black: #131313;
    --secondary-black: #191919;
    --tertiary-black: #222222;
    --primary-white: #f0f0f0;
    --secondary-white: #dedede;
    --primary-gray: #a8a8a8;
    --secondary-gray: #444;

}
/*----------BODY----------*/
body{
    font-family: 'Lato';
    margin: 0;
    background-color: var(--primary-black);
    height: 100%;
}
/*----------NAVBAR----------*/
.navbar{
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    background-color: var(--primary-black);
}
  .navbar img{
    height: 70px;
    margin: 8px 28px;
  }
  .nav-list{
    display: flex;
    list-style: none;
    margin: 8px 13px;
    padding: 0;
    justify-content: space-between;
  }
  .nav-item{
    margin: 0 20px; 
    position: relative;
    width: 80px;
    text-align: center;
  }
  .nav-link{
    color: var(--primary-white);
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    position: relative;
  }
  .nav-link:hover{
    color: var(--primary-gray);

  }
/*----------Background----------*/
.background {
top: -100px;
height: 120vh;
background-image: url("/assets/img/bg-masterhead.jpg");
background-attachment:fixed;
background-position: center;
background-size: cover;
}
/*----------About----------*/
.about-content {
padding-top: 150px;
height: 100%;
background-image: url("/assets/img/bg-about.png");
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.about-background {
  width: 100%;
  height: 100%;
  filter: brightness(70%) blur(5px);
}
.about-content img{
  max-width: 20%;
}
.about-text{
  padding: 8%;
  padding-left: 15%;
  padding-right: 15%;
  text-align: justify;
  hyphens: none;
  color: var(--secondary-white);
  font-size: 2rem;
  font-weight: 400;
}

/*----------FOOTER----------*/
.footer-section{
  padding-top: 5rem;
  background-color: var(--primary-black);
  text-align: center;
  color: var(--primary-white);
}
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-social a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--secondary-white);
  background-color: var(--secondary-black);
  margin: 15px;
  transition: background-color 0.3s ease;
}
.footer-social a:hover {
  color: var(--secondary-black);
  background-color: var(--secondary-white);
}

.footer-container{
  padding: 5rem;
  background-color: var(--primary-black);
  text-align: center;
  color: var(--primary-white);
}
/*----------Settings----------*/
/* Firefox */
* {
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-gray) var(--primary-black);
  }
/* Chrome */
*::-webkit-scrollbar {
    width: 10px;
  }
  
*::-webkit-scrollbar-track {
    background: var(--primary-black);
}
    
*::-webkit-scrollbar-thumb {
    background: var(--secondary-gray);
  }