body {
  background: linear-gradient(300deg,#EFE3C2, #123524, #3E7B27, #85A947);
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
}

#banner {
  left: -20px;
  height: 85px;
  opacity: 90%;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 33%;
  }
  33% {
    background-position: 67% 33%;
  }
  67% {
    background-position: 100% 67%;
  }
  100% {
    background-position: 0% 33%;
  }
}

.spacer{
  /* The image used */
   background-image: url(../images/bgimage.jpg);
 
  /* Set a specific height */
  min-height: 350px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.contact{
  position: absolute;
  top: 35px;
  right: 10px;
  height: 85px;
  opacity: 90%;
  z-index: 5;
}

@media only screen and (max-device-width: 1366px) {
  .spacer {
    background-attachment: scroll;
  }
  .nav-heading {
    visibility: hidden;
    
  }
}

.navbar-toggler{
  position: absolute;
  right: 5px;
  background-color: #EFE3C2 !important;
  color: #DDDDDD !important;
  border-color: #123524 !important;
}

.navbar-contact{
  position:absolute;
  top: 5px;
  right: 5px;

}

.navbar-brand{
  position:relative;
  left: -10px;
  top: 10px;
}

.nav-heading{
  position: relative;
  left: -55px;
  top: 5px;
  color: #EEEEEE;
}

h1 {
  color: #EEEEEE;
}

h2{
  color: #3E7B27;
}

h3{
  color: #3E7B27;
}

.navbar{
  background-color: #123524;
  height: 90px;
  opacity: 90%;
}

.card{
  background-color: #EFE3C2;
}

.hero-picture {
  background-color: #DDDDDD; 
  border-color: #141414;
  color: #123524;
  align-content: center;
}

.display{
  background-color: #DDDDDD;
  border-color: #141414;
  color: #123524;
}

.servicepic:hover{
  transform: scale(1.025);
}

.nav-link {
  filter: invert(90%) sepia(14%) saturate(438%) hue-rotate(1deg) brightness(103%) contrast(87%);
}

.nav-link:hover {
  filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(57deg) brightness(112%) contrast(100%);
}
.contact-link {
  filter: invert(90%) sepia(14%) saturate(438%) hue-rotate(1deg) brightness(103%) contrast(87%);
}

.contact-link:hover {
  transform: scale(1.025);
  filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(57deg) brightness(112%) contrast(100%);
}

.navbar-nav{
  background-color: #123524;

}

.emailbtn2{
  filter: invert(56%) sepia(79%) saturate(293%) hue-rotate(40deg) brightness(94%) contrast(89%);
  
}

.emailbtn2:hover {
  transform: scale(1.055);
  filter: invert(79%) sepia(7%) saturate(3155%) hue-rotate(38deg) brightness(78%) contrast(85%);
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #3E7B27;
  filter: invert(79%) sepia(7%) saturate(3155%) hue-rotate(38deg) brightness(78%) contrast(85%);
  transition: transform 0.3s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
}

.hover-underline-animation.center::after {
  transform-origin: bottom center;
}

.hover-underline-animation.center:hover::after {
  transform-origin: bottom center;
}

.example{
  color:#DDDDDD;
}

.btn-warning,
.btn-warning:focus,
.btn-warning:active {
  background-color: #3E7B27 !important;
  color: #DDDDDD !important;
  border-color: #123524 !important;
}

.btn-warning:hover{
  background-color: #85A947 !important;
  transform: scale(1.025);
}

.pendant{
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

h5 {
  display: inline-block;
  padding: 10px;
  background: #85A947;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.contact{
  align-items: center;
}

.card-img {
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}

.footer{
  color: #DDDDDD;
}