/* Template Color */
/* Template bg(background) Color */
.bgC-primary {
  background: #2a9134; }

.bgC-secondary {
  background: #f1fffa; }

/* Text Style */
.text-slant {
  font-family: 'Permanent Marker', cursive; }

/* Transition Effect */
/*=====Global CSS=====*/
body {
  font-family: 'Karla', sans-serif;
  color: #242424;
  background: #f1fffa; }
  body a {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    text-decoration: none; }
    body a:hover {
      text-decoration: none; }
  body button:focus {
    outline: none; }

.no-padding {
  padding: 0 !important; }

.height-30 {
  min-height: 30vh; }

/* Template Button Effect */
.link-primary {
  color: #f1fffa;
  font-family: 'Permanent Marker', cursive;
  text-transform: uppercase;
  padding: 0.4rem 0.6rem;
  border: 0.2rem solid #f1fffa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease; }
  .link-primary:hover {
    color: #2a9134;
    background: #f1fffa;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
    transform: translateY(7px);
    -webkit-transform: translateY(7px);
    -moz-transform: translateY(7px);
    -ms-transform: translateY(7px);
    -o-transform: translateY(7px); }

.link-contact {
  color: #f1fffa;
  border: 2px solid #f1fffa;
  text-transform: capitalize;
  border-radius: 0;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease; }
  .link-contact:hover {
    color: #2a9134;
    border-color: #2a9134;
    background: #f1fffa; }

.title-link {
  color: #2a9134;
  background: #f1fffa;
  font-size: 1.5rem;
  padding: 0.625rem; }

.title-underline {
  height: 3px;
  width: 250px;
  background: #2a9134;
  margin: -20px auto 0 auto; }

/* ----------HEADER TOP ICONS CSS---------- */
.top-icons .top-social-icons a {
  font-size: 1.5rem;
  color: #f1fffa; }
  .top-icons .top-social-icons a:hover {
    color: #242424; }

/* ----------HEADER NAV CSS---------- */
header {
  /* end NAV */ }
  header .navbar {
    background: #242424;
    padding: 0.625rem 1.25rem !important; }
    header .navbar.navbar-background {
      padding: 0.125rem 1.25rem !important; }
    header .navbar-brand {
      color: #2a9134;
      font-size: 1.875rem;
      text-transform: uppercase;
      border: 0.2rem solid #2a9134;
      padding: 0.4rem;
      transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease; }
      header .navbar-brand:hover {
        background: #2a9134;
        color: #f1fffa; }
    header .navbar-toggler {
      padding: 0.5rem;
      border: 0.2rem solid #2a9134; }
      header .navbar-toggler .bar-1,
      header .navbar-toggler .bar-2,
      header .navbar-toggler .bar-3 {
        width: 25px;
        height: 3px;
        margin: 0.3rem 0;
        background: #2a9134;
        border-radius: 0.1rem;
        -webkit-border-radius: 0.1rem;
        -moz-border-radius: 0.1rem;
        -ms-border-radius: 0.1rem;
        -o-border-radius: 0.1rem;
        transition: all 1s ease;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease; }
    header .navbar .change .bar-1 {
      background: red;
      transform: rotate(-45deg) translate(-5px, 6px);
      -webkit-transform: rotate(-45deg) translate(-5px, 6px);
      -moz-transform: rotate(-45deg) translate(-5px, 6px);
      -ms-transform: rotate(-45deg) translate(-5px, 6px);
      -o-transform: rotate(-45deg) translate(-5px, 6px); }
    header .navbar .change .bar-2 {
      opacity: 0; }
    header .navbar .change .bar-3 {
      background: red;
      transform: rotate(45deg) translate(-3px, -5px);
      -webkit-transform: rotate(45deg) translate(-3px, -5px);
      -moz-transform: rotate(45deg) translate(-3px, -5px);
      -ms-transform: rotate(45deg) translate(-3px, -5px);
      -o-transform: rotate(45deg) translate(-3px, -5px); }
    header .navbar-nav .nav-item {
      margin: 0.5rem; }
      header .navbar-nav .nav-item .nav-link {
        color: #f1fffa;
        font-size: 1.5rem;
        padding: 0.625rem 1.25rem;
        text-transform: capitalize;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        transition: all 1s ease;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease; }
        header .navbar-nav .nav-item .nav-link:hover {
          background: #2a9134;
          color: #f1fffa; }
    header .navbar-nav .nav-active {
      background: #2a9134;
      color: #f1fffa;
      font-family: 'Permanent Marker', cursive;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px; }
  header .homepage-banner .item-1,
  header .homepage-banner .item-2,
  header .homepage-banner .item-3 {
    height: 60vh;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 95%); }
  header .homepage-banner .item-1 {
    background: linear-gradient(to right, rgba(42, 145, 52, 0.9), rgba(42, 145, 52, 0.3)), url("../img/banner-1.jpeg") center/cover fixed no-repeat; }
  header .homepage-banner .item-2 {
    background: linear-gradient(to right, rgba(42, 145, 52, 0.9), rgba(42, 145, 52, 0.3)), url("../img/banner-2.jpeg") center/cover fixed no-repeat; }
  header .homepage-banner .item-3 {
    background: linear-gradient(to right, rgba(42, 145, 52, 0.9), rgba(42, 145, 52, 0.3)), url("../img/banner-3.jpeg") center/cover fixed no-repeat; }

/* ----------SKILLS CSS---------- */
.skill-icon {
  background: #242424;
  clip-path: polygon(0 0, 50% 0, 100% 100%, 0 100%);
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease; }
  .skill-icon:hover {
    background: #2a9134;
    clip-path: polygon(0 0, 60% 0, 100% 100%, 0 100%); }
  .skill-icon:hover span {
    color: #f1fffa; }
  .skill-icon span {
    font-size: 6.25rem;
    color: #909090;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease; }

.skill-info h3 {
  font-family: 'Permanent Marker', cursive; }

.skill-info p {
  color: #909090; }

/* ----------ABOUT CSS---------- */
.about #video-modal {
  height: 50vh;
  background: linear-gradient(rgba(42, 145, 52, 0.7), rgba(42, 145, 52, 0.3)), url("../img/video-filler.jpeg") center/cover fixed no-repeat;
  clip-path: polygon(100% 15%, 100% 100%, 0 100%, 0 5%); }
  .about #video-modal .modal-icon {
    font-size: 5rem;
    color: #f1fffa; }

.about .about-content {
  background: #909090;
  clip-path: polygon(100% 0, 100% 100%, 0 95%, 0 0); }
  .about .about-content .title a {
    background: #909090; }
  .about .about-content .about-progress {
    background: linear-gradient(rgba(36, 36, 36, 0.7), rgba(36, 36, 36, 0.7)), url("../img/video-filler.jpeg") center/cover fixed no-repeat;
    outline: 5px solid #2a9134;
    outline-offset: 10px; }
  .about .about-content .link-primary {
    border-color: #2a9134; }
    .about .about-content .link-primary:hover {
      border-color: #f1fffa; }

/* ---------- PROJECTS CSS---------- */
.projects .img-container {
  position: relative;
  background: linear-gradient(rgba(224, 224, 14, 0.7), rgba(224, 224, 14, 0.7));
  overflow: hidden;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease; }
  .projects .img-container:hover .project-link {
    margin-top: 0;
    opacity: 1; }
  .projects .img-container .project-img {
    opacity: 1;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease; }
    .projects .img-container .project-img:hover {
      opacity: 0.3;
      transform: scale(1.3);
      -webkit-transform: scale(1.3);
      -moz-transform: scale(1.3);
      -ms-transform: scale(1.3);
      -o-transform: scale(1.3); }
  .projects .img-container .project-link {
    font-size: 4rem;
    color: #2a9134;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease; }
    .projects .img-container .project-link:hover {
      color: #242424; }

/* ---------- CURRENT PROJECTS CSS---------- */
.current-projects {
  background: #909090;
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); }
  .current-projects .current-projects-photos {
    min-height: 50vh;
    position: relative; }
    .current-projects .current-projects-photos .current-project-img {
      width: 50%;
      height: 60%;
      position: absolute;
      transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease; }
      .current-projects .current-projects-photos .current-project-img:hover {
        z-index: 50;
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2); }
      .current-projects .current-projects-photos .current-project-img-1 {
        top: 0;
        left: 10%;
        z-index: 30;
        transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        -o-transform: rotate(-15deg); }
      .current-projects .current-projects-photos .current-project-img-2 {
        top: 0;
        left: 40%;
        z-index: 40;
        transform: rotate(8deg);
        -webkit-transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        -o-transform: rotate(8deg); }
      .current-projects .current-projects-photos .current-project-img-3 {
        top: 40%;
        left: 8%;
        transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg); }
      .current-projects .current-projects-photos .current-project-img-4 {
        top: 41%;
        left: 40%;
        transform: rotate(38deg);
        -webkit-transform: rotate(38deg);
        -moz-transform: rotate(38deg);
        -ms-transform: rotate(38deg);
        -o-transform: rotate(38deg); }

/* ---------- POSTS CSS---------- */
#posts {
  background: #f1fffa; }
  #posts .card,
  #posts .card-body,
  #posts .card-footer {
    background: transparent;
    border: none;
    border-radius: 0 !important; }
  #posts .card {
    position: relative;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease; }
    #posts .card:hover .post-status {
      opacity: 1; }
    #posts .card .card-img-top {
      border-radius: 0 !important; }
    #posts .card .post-status {
      position: absolute;
      top: 0;
      right: 0;
      background: #dd0000;
      display: inline-block;
      transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      opacity: 0; }
    #posts .card .post-link {
      color: #2a9134;
      text-transform: capitalize;
      transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease; }
      #posts .card .post-link:hover {
        color: #dd0000; }

/* ---------- CONTACT CSS---------- */
.contact {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/banner-2.jpeg") center/cover fixed no-repeat;
  clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%); }
  .contact .form-control {
    color: white;
    background: transparent;
    border: none;
    border-bottom: 2px solid white;
    border-radius: 0; }
  .contact input::placeholder {
    color: white !important;
    font-size: 1.5rem; }

/* ---------- VALUES CSS---------- */
.values .value {
  position: relative;
  text-align: center; }
  .values .value:hover .value-icon {
    background: #2a9134;
    transform: scale(1.2); }
  .values .value:hover .value-number {
    color: #f1fffa;
    background: #909090;
    transform: scale(0.9); }
  .values .value .value-icon {
    font-size: 3rem;
    padding: 1.5rem 2rem;
    background: #909090;
    color: #f1fffa;
    border-radius: 50%;
    position: relative;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease; }
  .values .value .value-number {
    padding: 0.8rem 1rem;
    background: #2a9134;
    color: #909090;
    border-radius: 50%;
    position: absolute;
    top: -12%;
    left: 60%;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease; }
  .values .value h1 {
    font-family: 'Permanent Marker', cursive;
    font-style: italic; }

/* ---------- REVIEWS CSS---------- */
#reviews {
  background: linear-gradient(rgba(42, 145, 52, 0.7), rgba(42, 145, 52, 0.7)), url("../img/banner-1.jpeg");
  color: #f1fffa; }
  #reviews .rating i {
    color: yellow; }

/* ---------- TEAMS CSS---------- */
#teams .member-wrapper {
  background: #2a9134;
  overflow: hidden;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease; }
  #teams .member-wrapper:hover .member-img {
    transform: translateY(-70px);
    opacity: 0.5; }
  #teams .member-wrapper:hover .member-info-wrap {
    margin-bottom: 0;
    opacity: 1;
    visibility: visible; }
  #teams .member-wrapper .member-img {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease; }
  #teams .member-wrapper .member-info-wrap {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #2a9134;
    padding: 1rem;
    margin-bottom: -100px;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    opacity: 0;
    visibility: hidden; }
    #teams .member-wrapper .member-info-wrap .member-social-icon > a {
      font-size: 1.5rem;
      color: #f1fffa;
      transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease; }
      #teams .member-wrapper .member-info-wrap .member-social-icon > a:hover {
        background: #f1fffa;
        color: #2a9134;
        padding: 0.5rem;
        border-radius: 50%; }
    #teams .member-wrapper .member-info-wrap .member-icon > a {
      font-size: 4rem;
      color: #f1fffa;
      transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease; }
      #teams .member-wrapper .member-info-wrap .member-icon > a:hover {
        background: #f1fffa;
        color: #2a9134;
        padding: 0.5rem;
        border-radius: 50%; }

/* ---------- CONTACT-FORM CSS---------- */
#contact-form {
  min-height: 80vh;
  background: linear-gradient(rgba(42, 145, 52, 0.5), rgba(42, 145, 52, 0.5)), url("../img/banner-1.jpeg") center/cover fixed no-repeat; }
  #contact-form .card {
    background: rgba(0, 0, 0, 0.5);
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease; }
    #contact-form .card:hover {
      background: rgba(0, 0, 0, 0.8); }
    #contact-form .card .input-group-text {
      background: #2a9134;
      border-color: #2a9134; }

/* ---------- FOOTER CSS---------- */
#footer {
  background: #909090; }
  #footer .footer-icons > a {
    font-size: 2rem; }

/* ----------RESPONSIVE CSS---------- */