.footer-area {
  position: absolute !important;
  width:100% !important;
  z-index: 1;
  background-color: #f2f4f5;

  .footer-widget {
    position: relative;
    z-index: 1;

    .widget-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 30px;
      color:#5a5555 !important;
    }

    p {
      color: #ffffff;
      margin-bottom: 15px;
    }
  }
}

.contact-info {
  position: relative;
  z-index: 1;

  p {
    @include display-flex(flex);
    @include align-items-center;
    margin-bottom: 20px;
    line-height: 1.3;

    i {
      @include flex(0 0 30px);
      max-width: 30px;
      width: 30px;
      color: #77b122;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.footer-widget-nav {
  position: relative;
  z-index: 1;

  ul {
    @include display-flex(flex);
    @include align-items-center;
    @include flex-wrap(wrap);

    li {
      @include flex(0 0 50%);
      max-width: 50%;
      width: 50%;

      a {
        color: #b7b7b7;
        display: block;
        margin-bottom: 15px;
        font-weight: 400;

        &:focus,
        &:hover {
          color: #ffffff;
        }
      }
    }
  }
}

.copywrite-area {
  position: relative;
  z-index: 1;
  padding: 20px 0;
  background-color: #0a0a0a;

  .copywrite-text {
    p {
      font-size: 14px;
      margin-bottom: 0;
      font-weight: 400;
      color: #707070;
      @media #{$breakpoint-lg} {
        font-size: 12px;
      }
      @media #{$breakpoint-md} {
        font-size: 12px;
      }
      @media #{$breakpoint-xs} {
        font-size: 12px;
      }
    }

    a {
      color: #ffffff;
      font-size: 14px;
      font-weight: 400;
      @media #{$breakpoint-lg} {
        font-size: 12px;
      }
      @media #{$breakpoint-md} {
        font-size: 12px;
      }
      @media #{$breakpoint-xs} {
        font-size: 12px;
      }

      &:focus,
      &:hover {
        color: $hover;
      }
    }
  }

  .footer-nav {
    position: relative;
    z-index: 1;

    ul {
      @include display-flex(flex);
      @include justify-content-end;
      @include flex-wrap(wrap);
      @include align-items-center;
      @media #{$breakpoint-xs} {
        margin-top: 10px;
        @include justify-content-start;
      }

      li a {
        display: inline-block;
        color: #707070;
        font-size: 14px;
        padding: 0 12px;
        font-weight: 400;
        @media #{$breakpoint-md} {
          font-size: 12px;
          padding: 0 5px;
        }
        @media #{$breakpoint-xs} {
          padding: 0 5px;
          font-size: 12px;
        }

        &:focus,
        &:hover {
          font-weight: 400;
          color: $hover;
        }
      }

      li:last-child {
        a {
          padding-right: 0;
        }
      }

      li:first-child a {
        @media #{$breakpoint-xs} {
          padding-left: 0;
        }
      }
    }
  }
}

.footer-social-info a i{
transition-duration: 500ms;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
color: #ffffff;
line-height: 40px;
margin-bottom:10px;

}
.footer-social-info > a > i> fa> fa-facebook{
	border: 1px solid #3c5a99;
	background-color: #3c5a99;

}
	
.footer-social-info >a > i> fa> fa-twitter{
	border: 1px solid #1da1f2;
	background-color: #1da1f2;

	}