/*
@File: Constik Template Styles

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
*******************************************
** - Google Fonts
** - Default CSS
** - Section Title CSS
** - Navbar CSS
** - Banner CSS
** - About CSS
** - Service CSS
** - Service Details CSS
** - Works CSS
** - Projects CSS
** - Team CSS
** - Testimonials CSS
** - Blog CSS
** - Blog Details CSS
** - Partner CSS
** - Newsletter CSS
** - Instrument CSS
** - Map CSS
** - Amazing Projects CSS
** - Build CSS
** - Quote CSS
** - Faq CSS
** - Count CSS
** - Page Title CSS
** - Authentication CSS
** - Member Details CSS
** - Terms CSS
** - Error CSS
** - Pricing CSS
** - Comingsoon CSS
** - Contact CSS
** - Pagination CSS
** - Go Top CSS
** - Preloader CSS
** - Footer CSS
** - Copy Right CSS
*/
@import "variables";

/* -----------------------------------------
  Google Fonts
----------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* -----------------------------------------
  Default CSS
----------------------------------------- */
body {
  padding: 0;
  margin: 0;
  font-size: $font-size;
  font-family: $font-family;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  color: $color-dark;
  line-height: 1.4;
}

h1 {
  font-size: 50px;
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

a {
  color: $color-dark;
  transition: $transition;
  text-decoration: none;
  outline: 0 !important;
}

a:hover {
  color: $color-primary;
  text-decoration: none;
}

:focus {
  outline: 0 !important;
}

.d-table {
  width: 100%;
  height: 100%;
}

.d-table-cell {
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  color: $color-medium;
  font-size: $font-size;
  margin-bottom: 15px;
  line-height: 1.6;
}

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

.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-100 {
  padding-bottom: 100px;
}

.ptb-70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.pt-70 {
  padding-top: 70px;
}

.pb-70 {
  padding-bottom: 70px;
}

.no-wrap {
  flex-wrap: nowrap;
}

.color-primary {
  color: $color-primary !important;
}

.color-secondary {
  color: $color-secondary !important;
}

.color-dark {
  color: $color-dark;
}

.bg-primary {
  background-color: $bg-primary !important;
}

.bg-secondary {
  background-color: $bg-secondary !important;
}

.bg-fff3cf {
  background-color: $bg-fff3cf !important;
}
.form-group {
  margin-bottom: 20px;
}

/*section-title*/
.section-title {
  max-width: 720px;
  text-align: left;
  margin-right: auto;
  margin-bottom: 60px;
  position: relative;
  z-index: 5;
  &::before {
    position: absolute;
    content: "";
    left: -60px;
    top: 0;
    width: 40%;
    height: 100%;
    background: $color-primary;
    z-index: -1;
  }
  h2 {
    font-size: 40px;
    line-height: 1.3;
    margin: 0;
    padding: 30px 0;
  }

  p {
    max-width: 600px;
    font-size: 17px;
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
  }
  span {
    color: $color-primary;
  }
}

.section-title .learn-more-btn {
  margin-top: 20px;
}

.section-title.style-two {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  &::before {
    display: none;
  }
  h2 {
    padding: unset;
    margin-top: -10px;
  }
}

/* Primary Button */
.primary-btn {
  position: relative;
  overflow: hidden;
  text-align: center;
  display: inline-block;
  transition: $transition;
  border-radius: 0;
  border: none;
  padding: 10px 30px;
  z-index: 1;
  color: $color-dark;
  background-color: $color-primary;
  font-size: 16px;
  font-weight: 600;
  font-family: $font-family;
  line-height: 1.8;
  text-transform: capitalize;
  &::before,
  &::after {
    content: "";
    position: absolute;
    width: calc(50% + 4px);
    height: 0;
    background-color: $color-dark;
    z-index: -1;
    transition: $transition;
  }
  &::before {
    bottom: 0;
    left: 0;
  }
  &::after {
    top: 0;
    right: 0;
  }
  &:hover {
    color: $color-primary;
    &::before,
    &::after {
      height: 120%;
    }
  }
}
.cta-btn {
  line-height: 0.8;
}

/* Text Button*/
.btn-text-only {
  background: transparent;
}

/* Social Icon CSS*/
.social-link {
  a {
    display: inline-block;
    line-height: 0;
    text-align: center;
    background: $color-primary;
    color: $color-dark;
    padding: 10px 12px;
    font-size: 16px;
    margin-right: 8px;
    &:hover {
      background: $color-dark;
      color: $color-primary;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}
/*Form-Control CSS*/
.form-control {
  height: 58px;
  color: $color-dark;
  box-shadow: unset !important;
  border: none;
  background-color: $color-white;
  transition: $transition;
  border-radius: 0;
  padding: 1px 0 0 15px;
  font-size: 16px;
}

.form-control::-webkit-input-placeholder {
  color: $color-light2;
  transition: $transition;
}

.form-control:-ms-input-placeholder {
  color: $color-light2;
  transition: $transition;
}

.form-control::-ms-input-placeholder {
  color: $color-light2;
  transition: $transition;
}

.form-control::placeholder {
  color: $color-light2;
  transition: $transition;
}

.form-control:focus {
  border-color: $color-primary;
}

textarea.form-control {
  height: auto;
  padding-top: 15px;
}

/* -----------------------------------------
  Navbar CSS
----------------------------------------- */
.header-area {
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 999;
  .top-header-area {
    padding: 20px 0 35px;
    background: rgb(26, 26, 26);
    background: -moz-linear-gradient(
      90deg,
      rgba(26, 26, 26, 1) 30%,
      rgba(26, 26, 26, 0.4962359943977591) 30%
    );
    background: -webkit-linear-gradient(
      90deg,
      rgba(26, 26, 26, 1) 30%,
      rgba(26, 26, 26, 0.4962359943977591) 30%
    );
    background: linear-gradient(
      90deg,
      rgba(26, 26, 26, 1) 30%,
      rgba(26, 26, 26, 0.4962359943977591) 30%
    );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1a1a1a",endColorstr="#1a1a1a",GradientType=1);
    .navbar-brand {
      padding: 0;
      margin: 0;
    }
    .contact-info {
      position: relative;
      i {
        position: absolute;
        top: 0;
        left: 0;
        width: 45px;
        height: 45px;
        line-height: 45px;
        color: $color-white;
        text-align: center;
        font-size: 30px;
        display: inline-block;
      }
      .contact-info-content {
        margin-left: 55px;
        display: inline-block;
        p {
          text-transform: capitalize;
          color: $color-primary;
          line-height: 1.4;
          margin: 0;
        }
        a {
          font-size: 14px;
          color: $color-white;
        }
      }
    }
  }
}

/* Header Style Two*/
.header-area.header-two,
.header-area.header-three {
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 999;
  .top-header-area {
    padding: 16px 0;
    background: $color-primary;
    .social-link {
      a {
        padding: 0;
        margin-right: 14px;
        background: transparent;
        &:hover {
          color: $color-white;
        }
      }
    }
    .contact-info {
      .contact-info-content {
        margin-left: unset;
        p {
          margin-right: 8px;
          display: inline-block;
          color: $color-white;
        }
        a {
          font-size: 14px;
          color: $color-dark;
        }
      }
    }
  }

  .constik-nav {
    padding: 16px 0;
    margin-top: 0;
    margin-top: unset;
    background: rgba(0, 30, 76, 0.78);
    .navbar {
      background: transparent;
      border: transparent;
      ul {
        margin-left: auto;
      }
      .nav-item {
        a {
          color: $color-white;
        }
        .toggle::after {
          color: $color-white;
        }
      }
      .side-option {
        .item {
          a:not(.primary-btn) {
            color: $color-white;
          }
          .menu-item {
            &:hover {
              a {
                color: $color-primary;
              }
            }
            a {
              color: $color-dark;
            }
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}

/* Header Style Three*/
.header-area.header-three {
  position: unset;
  .constik-nav {
    background: $color-white;
    .navbar {
      .nav-item {
        a {
          color: $color-dark;
        }
        .toggle::after {
          color: $color-dark;
        }
      }
      .side-option {
        .item {
          a:not(.primary-btn) {
            color: $color-dark;
          }
          .menu-link {
            color: $color-dark;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
.constik-responsive-nav {
  display: none;
}
.navbar-light {
  .navbar-brand {
    .logo2 {
      display: none;
    }
  }
}
.constik-nav {
  margin-top: -15px;
  .navbar {
    position: inherit;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    background: $color-white;
    border: 2px solid $color-primary;
    ul {
      padding-left: 0;
      list-style-type: none;
      margin-bottom: 0;
    }
    .navbar-nav {
      .nav-item {
        position: relative;
        margin-left: 15px;
        margin-right: 15px;
        a {
          color: $color-dark;
          font-size: 16px;
          font-weight: 600;
          padding-left: 0;
          padding-right: 0;
          padding-top: 20px;
          padding-bottom: 20px;
          &:hover {
            color: $color-primary;
          }
          &::before {
            font-family: "Font Awesome 5 Free";
            font-weight: 600;
            font-size: 22px;
            position: absolute;
            content: "\f0de";
            left: 50%;
            bottom: 0;
            transform: translate(-50%, 15px);
            opacity: 0;
          }
        }
        a.active {
          color: $color-primary;
          &::before {
            opacity: 1;
          }
        }
        .toggle {
          &::after {
            content: "\e900";
            font-family: "Flaticon";
            font-size: 8px;
            vertical-align: middle;
            margin-left: 5px;
            display: inline-block;
            color: $color-dark;
            transition: $transition;
          }
        }
        .dropdown-menu {
          border: none;
          top: 66px;
          left: 0;
          z-index: 99;
          opacity: 0;
          width: 250px;
          display: block;
          border-radius: 0;
          padding: 10px 0;
          position: absolute;
          visibility: hidden;
          background: $color-white;
          transition: $transition;
          box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
          .nav-item {
            position: relative;
            padding-left: 16px;
            margin-left: 0;
            margin-right: 0;
            .nav-link {
              color: $color-dark;
              &:hover {
                color: $color-primary;
                &::before {
                  opacity: 0;
                }
                &.toggle {
                  &::after {
                    transform: rotateZ(90deg);
                  }
                }
              }
            }
            a.active {
              color: $color-primary;
              &::before {
                opacity: 0;
              }
            }
          }
          .toggle {
            &::after {
              content: "\e900";
              position: absolute;
              top: 10px;
              right: 16px;
              font-family: "Flaticon";
              font-size: 10px;
              color: $color-dark;
              transition: $transition;
            }
          }
          a {
            font-size: 15px;
            font-weight: 500;
            text-transform: capitalize;
            padding-top: 8px;
            padding-bottom: 8px;
            margin: 0;
            display: block;
          }
        }
        &:hover {
          .dropdown-menu {
            opacity: 1;
            visibility: visible;
            margin-top: 0;
            .toggle::after {
              transform: none;
            }
          }
          .toggle::after {
            transform: rotateZ(90deg);
          }
        }
      }
    }
    .side-option {
      display: flex;
      align-items: center;
      .item {
        position: relative;
        margin-left: 15px;
        margin-right: 15px;
        .language {
          a {
            color: $color-dark;
            font-size: 16px;
            font-weight: 600;
            i {
              vertical-align: 3px;
            }
            img {
              width: 16px;
              height: 16px;
              max-width: 16px;
              border-radius: 50%;
              margin-top: -2px;
            }
          }
          .menu {
            border: none;
            top: 46px;
            left: -15px;
            z-index: 99;
            display: none;
            border-radius: 0;
            min-width: 130px;
            padding: 10px 5px;
            position: absolute;
            background: $color-white;
            transition: $transition;
            box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
            animation: fadeIn 0.3s linear 1;
            .menu-item {
              padding: 5px;
              .menu-link {
                font-size: 15px;
                font-weight: 500;
                color: $color-dark;
                &:hover {
                  color: $color-primary;
                }
              }
            }
            img {
              margin-top: 0;
              border-radius: 50%;
              margin-right: 5px;
              margin-top: -1.5px;
            }
          }
        }
        .search {
          i {
            vertical-align: middle;
          }
        }
      }
    }
  }
}
.language {
  a {
    color: $color-dark;
    font-size: 16px;
    font-weight: 600;
    i {
      vertical-align: 3px;
    }
  }
  .menu {
    border: none;
    top: 46px;
    left: -15px;
    z-index: 99;
    display: none;
    border-radius: 0;
    min-width: 100px;
    padding: 10px 5px;
    position: absolute;
    background: $color-white;
    transition: $transition;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.3s linear 1;
    .menu-item {
      padding: 5px;
      .menu-link {
        font-size: 15px;
        font-weight: 500;
        color: $color-dark;
        &:hover {
          color: $color-primary;
        }
      }
    }
    img {
      width: 16px;
      height: 16px;
      max-width: 16px;
      border-radius: 50%;
      margin-right: 5px;
    }
  }
}
.search {
  position: relative;
  transition: $transition;
}
.search-box {
  position: relative;
  width: auto;
  max-width: 400px;
  background: #fff;
  padding: 16px 10px;
  box-shadow: 0 10px 15px rgba(51, 47, 59, 0.1);
  margin: 0 auto;
  .search-form {
    position: relative;
    display: flex;
    .search-input {
      display: block;
      width: 100%;
      line-height: initial;
      border: 1px solid #eeeeee;
      color: $color-dark;
      outline: 0;
      padding: 6px 12px;
      transition: $transition;
      &:focus {
        border-color: $color-primary;
      }
    }
  }
  .mfp-close {
    width: unset;
    height: unset;
    top: -50px;
    opacity: 1;
    padding: 0 0 18px 10px;
    color: $color-white;
  }
}
.mfp-zoom-in {
  .mfp-with-anim {
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transform: scale(0.8);
  }
  &.mfp-bg {
    opacity: 0;
    transition: all 0.3s ease-out;
  }
  &.mfp-ready {
    .mfp-with-anim {
      opacity: 1;
      transform: scale(1);
    }
    &.mfp-bg {
      opacity: 0.8;
    }
  }
  &.mfp-removing {
    .mfp-with-anim {
      transform: scale(0.8);
      opacity: 0;
    }
    &.mfp-bg {
      opacity: 0;
    }
  }
}

.main-navbar-area.stickyadd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  animation: slideInDown 1s 1;
  .constik-nav {
    margin-top: 0;
    .navbar-brand {
      display: block;
    }
  }
}

.header-area.header-two {
  .main-navbar-area.stickyadd {
    .constik-nav {
      padding: 5px 0;
      background: rgba(0, 30, 76, 1);
    }
  }
}

.header-area.header-three {
  .main-navbar-area.stickyadd {
    .constik-nav {
      padding: 5px 0;
      box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
    }
  }
}

.constik-nav {
  .navbar {
    .navbar-nav {
      .nav-item {
        .dropdown-menu {
          li {
            .dropdown-menu {
              top: 0;
              opacity: 0;
              left: -250px;
              margin-top: 15px;
              visibility: hidden;
              li {
                a {
                  color: $color-dark;
                  &:hover {
                    color: $color-primary;
                  }
                  &:focus {
                    color: $color-primary;
                  }
                }
                a.active {
                  color: $color-primary;
                }
                .dropdown-menu {
                  top: 0;
                  opacity: 0;
                  left: 250px;
                  visibility: hidden;
                  li {
                    a {
                      color: $color-dark;
                      &:hover {
                        color: $color-primary;
                      }
                      &:focus {
                        color: $color-primary;
                      }
                    }
                    a.active {
                      color: $color-primary;
                    }
                    .dropdown-menu {
                      top: 0;
                      opacity: 0;
                      left: 250px;
                      visibility: hidden;
                      li {
                        a {
                          color: $color-dark;
                          &:hover {
                            color: $color-primary;
                          }
                          &:focus {
                            color: $color-primary;
                          }
                        }
                        a.active {
                          color: $color-primary;
                        }
                        .dropdown-menu {
                          top: 0;
                          opacity: 0;
                          left: 250px;
                          visibility: hidden;
                          li {
                            a {
                              color: $color-dark;
                              &:hover {
                                color: $color-primary;
                              }
                              &:focus {
                                color: $color-primary;
                              }
                            }
                            a.active {
                              color: $color-primary;
                            }
                            .dropdown-menu {
                              top: 0;
                              opacity: 0;
                              left: 250px;
                              visibility: hidden;
                              li {
                                a {
                                  color: $color-dark;
                                  &:hover {
                                    color: $color-primary;
                                  }
                                  &:focus {
                                    color: $color-primary;
                                  }
                                }
                                a.active {
                                  color: $color-primary;
                                }
                                .dropdown-menu {
                                  top: 0;
                                  opacity: 0;
                                  left: 250px;
                                  visibility: hidden;
                                  li {
                                    a {
                                      color: $color-dark;
                                      &:hover {
                                        color: $color-primary;
                                      }
                                      &:focus {
                                        color: $color-primary;
                                      }
                                    }
                                    a.active {
                                      color: $color-primary;
                                    }
                                  }
                                }
                                &:hover {
                                  .dropdown-menu {
                                    opacity: 1;
                                    visibility: visible;
                                  }
                                }
                              }
                              li.active {
                                a {
                                  color: $color-primary;
                                }
                              }
                            }
                            &:hover {
                              .dropdown-menu {
                                opacity: 1;
                                visibility: visible;
                              }
                            }
                          }
                          li.active {
                            a {
                              color: $color-primary;
                            }
                          }
                        }
                        &:hover {
                          .dropdown-menu {
                            opacity: 1;
                            visibility: visible;
                          }
                        }
                      }
                      li.active {
                        a {
                          color: $color-primary;
                        }
                      }
                    }
                    &:hover {
                      .dropdown-menu {
                        opacity: 1;
                        visibility: visible;
                      }
                    }
                  }
                  li.active {
                    a {
                      color: $color-primary;
                    }
                  }
                }
                &:hover {
                  .dropdown-menu {
                    opacity: 1;
                    visibility: visible;
                  }
                }
              }
              li.active {
                a {
                  color: $color-primary;
                }
              }
            }
            &:hover {
              .dropdown-menu {
                opacity: 1;
                visibility: visible;
                margin-top: 0;
              }
            }
          }
          li.active {
            a {
              color: $color-primary;
            }
          }
        }
        &:hover {
          .dropdown-menu {
            opacity: 1;
            visibility: visible;
            margin-top: 0;
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 1199px) {
  .header-area {
    .top-header-area {
      background: rgba(26, 26, 26, 0.69);
      padding: 20px 0;
      .navbar-brand {
        display: none;
      }
      .contact-info {
        .contact-info-content {
          margin-left: 10px;
        }
        i {
          position: unset;
          width: unset;
          height: unset;
          vertical-align: 3px;
        }
      }
    }
  }
  .header-area.header-two,
  .header-area.header-three {
    position: unset;
    .top-header-area {
      .contact-info {
        text-align: center;
        .contact-info-content {
          margin-left: unset;
          p {
            margin-right: unset;
          }
          p,
          a {
            display: block;
          }
        }
      }
    }
  }
  .main-navbar-area {
    position: relative;
  }
  .constik-responsive-menu {
    .logo {
      .logo2 {
        display: none;
      }
    }
  }
  .constik-responsive-nav {
    display: block;
    background: $color-white;
    border: 2px solid $color-primary;
    padding-top: 15px;
    padding-bottom: 15px;
    .constik-responsive-menu {
      position: relative;
    }
    .constik-responsive-menu.mean-container {
      .mean-nav {
        .navbar-nav {
          height: 300px;
          overflow-y: scroll;
        }
        ul {
          font-size: 15px;
          li {
            a.active {
              color: $color-primary;
            }
            li {
              a {
                font-size: 14.5px;
              }
            }
          }
        }
        .navbar-brand {
          display: none;
        }
        .side-option {
          display: none;
        }
      }
      .navbar-nav {
        overflow-y: scroll;
        box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
      }
    }
    .logo {
      position: relative;
      width: 60%;
      z-index: 999;
    }
    .mean-container {
      a.meanmenu-reveal {
        padding-top: 12px;
        color: $color-dark;
        span {
          background: $color-dark;
        }
      }
    }
  }
  .constik-nav {
    display: none;
  }
  .side-option-responsive {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 45px;
    transform: translateY(-50%);
    z-index: 999;
    .item {
      position: relative;
      margin-right: 14px;
      .language {
        a {
          color: $color-dark;
          font-size: 16px;
          font-weight: 600;
          i {
            vertical-align: 2px;
          }
        }
        .menu {
          margin: 0;
          padding: 0;
          padding: 5px 0 5px 5px;
          border: none;
          top: 30px;
          left: -15px;
          z-index: 99;
          width: 120px;
          display: none;
          border-radius: 0;
          position: absolute;
          background: $color-white;
          transition: $transition;
          box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
          list-style-type: none;
          .menu-item {
            display: flex;
            align-items: center;
            .menu-link {
              font-size: 15px;
              font-weight: 500;
            }
          }
        }
      }
      .search {
        i {
          vertical-align: middle;
        }
      }
    }
  }
}

/* -----------------------------------------
  Banner CSS
----------------------------------------- */
.home-banner-area {
  padding-top: 160px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-image: url(../img/banner/banner-bg-1.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 26, 0.4962359943977591);
  }
}

.banner-content {
  padding-top: 200px;
  padding-bottom: 200px;
  h1 {
    font-size: 60px;
    color: $color-white;
    margin-bottom: 20px;
    margin-top: -15px;
    line-height: 1.2;
    span {
      color: $color-primary;
    }
  }
  p {
    font-size: 18px;
    color: $color-white;
    margin-bottom: 35px;
  }
  .social-link {
    a {
      display: inline-block;
      color: $color-primary;
      margin-right: 4px;
      background: $bg-secondary;
      border-radius: 50%;
      font-size: 12px;
      padding: 0;
      width: 26px;
      height: 26px;
      line-height: 26px;
      border: 1px solid $bg-secondary;
      &:last-child {
        margin-right: 0;
      }
      &:hover {
        color: $color-primary;
        background: transparent;
        border: 1px solid $color-primary;
      }
    }
  }
  .cta-btn {
    margin-bottom: 40px;
  }
}
.banner-img {
  img {
    max-width: 576px;
  }
}

.banner-two {
  padding-top: 152px;
  background-image: url(../img/banner/banner-bg-2.jpg);
  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 30, 76, 0.62);
  }
  .banner-content {
    text-align: center;
    .cta-btn {
      margin-bottom: 0;
    }
  }
}
.banner-three {
  background: unset;
  background: #fff;
  padding: unset;
  &.home-banner-area::before {
    background: unset;
    background: none;
  }
  .banner-content {
    .cta-btn {
      margin: unset;
    }
  }
  .banner-slider {
    .owl-item {
      &::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 30, 76, 0.62);
      }
      &:nth-child(1) {
        background: url(../img/banner/baner.jpg) no-repeat center;
        background-size: cover;
      }
      &:nth-child(2) {
        background: url(../img/banner/baner.jpg) no-repeat center;
        background-size: cover;
      }
      &:nth-child(3) {
        background: url(../img/banner/baner.jpg) no-repeat center;
        background-size: cover;
      }
    }
  }
  .owl-item.active {
    h1 {
      animation: fadeInDown 2s both 1;
    }
    p {
      animation: fadeIn 2s both 1;
    }
    .cta-btn {
      animation: fadeInUp 2s both 1;
    }
  }
  .owl-carousel {
    .owl-dots {
      text-align: center;
      position: absolute;
      left: 50%;
      bottom: 50px;
      display: flex;
      align-items: center;
      transform: translateX(-50%);
      .owl-dot {
        display: inline-block;
        width: 6px;
        height: 24px;
        margin: 5px;
        border-radius: 30px;
        background: $color-white;
        transition: $transition;
      }
      .owl-dot.active {
        height: 45px;
        background: $color-primary;
      }
    }
  }
}

/* -----------------------------------------
 About CSS
----------------------------------------- */
.about-section {
  .about-content {
    margin-bottom: 30px;
    h2 {
      margin-bottom: 18px;
      line-height: 1.3;
      span {
        color: $color-primary;
      }
    }
    p {
      line-height: 1.5;
      margin-bottom: 10px;
    }
    .about-item-list {
      margin-bottom: 30px;
      ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
        li {
          display: block;
          font-weight: 500;
          margin-bottom: 6px;
          padding-left: 25px;
          position: relative;
          line-height: 1.8;
          color: $color-medium;
          &:last-child {
            margin-bottom: 0;
          }
          i {
            margin-left: -25px;
            margin-right: 5px;
            color: $color-primary;
            vertical-align: -2px;
          }
        }
      }
    }
  }
  .about-image {
    margin-bottom: 30px;
  }
  .left,
  .right {
    position: relative;
    &::before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      bottom: -15px;
    }
  }
  .left {
    &::before {
      right: -15px;
      border-bottom: 150px solid rgba(255, 188, 19, 0.8);
      border-left: 150px solid transparent;
    }
  }
  .right {
    margin-top: -15px;
    &::before {
      left: -15px;
      border-bottom: 135px solid rgba(255, 188, 19, 0.8);
      border-right: 135px solid transparent;
    }
  }
  .about-fact {
    display: flex;
    position: relative;
    padding: 35px 30px;
    margin-bottom: 30px;
    background: url(../img/about/about-fact-bg.jpg) no-repeat center;
    background-size: cover;
    z-index: 1;
    align-items: center;
    justify-content: center;
    &::after {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(26, 26, 26, 0.8);
      z-index: -1;
    }

    i {
      width: 60px;
      height: 60px;
      line-height: 57px;
      background: $color-white;
      text-align: center;
      display: inline-block;
      img {
        width: 32px;
      }
    }
    .content {
      padding-left: 16px;
      h4 {
        color: $color-primary;
        margin-bottom: 0;
      }
      span {
        color: $color-white;
      }
    }
  }
  .about-img-content {
    position: relative;
    overflow: hidden;
    .overlay-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin-top: -15px;
      padding: 25px 30px;
      border: 4px solid $color-primary;
      background: rgba(0, 30, 76, 0.9);
      z-index: 1;
      h3 {
        line-height: 1.2;
        color: $color-primary;
      }
      span {
        color: $color-white;
      }
    }
  }
}

.about-section.about-style-two {
  .about-img-content {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    .about-image {
      margin-bottom: 15px;
      img {
        max-width: unset;
      }
    }
    .about-fact {
      display: block;
      overflow: hidden;
      margin-bottom: 0;
      background: $color-secondary;
      max-width: calc(100% - 55px);
      padding: 20px 0;
      &::before {
        position: absolute;
        content: "";
        right: 0;
        top: 0;
        border-top: 90px solid $color-primary;
        border-left: 60px solid transparent;
      }
      &::after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: unset;
        height: unset;
        background: unset;
        border-bottom: 90px solid $color-primary;
        border-right: 60px solid transparent;
      }
      .content {
        padding-left: 16px;
        text-align: center;
        h4 {
          color: $color-primary;
          margin-top: -5px;
          margin-bottom: 0;
        }
        span {
          color: $color-white;
        }
      }
    }
    .overlay-img {
      position: absolute;
      bottom: 35px;
      right: 0;
      height: calc(100% - 135px);
    }
  }
}
.about-section.about-style-three {
  .about-img-content {
    margin-bottom: 30px;
    [class*="col-"]:first-child {
      padding-right: 5px;
    }
    [class*="col-"]:last-child {
      padding-left: 5px;
    }
    .about-image {
      margin-bottom: 10px;
    }
  }
}
/* -----------------------------------------
  Service CSS
----------------------------------------- */
.strong-service-section {
  background: url(../img/service-bg-1.jpg) no-repeat center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  z-index: 1;
  &::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 26, 0.7);
    z-index: -1;
  }
  .service-content {
    margin-bottom: 30px;
    padding: 43px 0;
    position: relative;
    z-index: 1;
    &::after {
      position: absolute;
      content: "";
      left: -60px;
      top: 0;
      width: 40%;
      height: 100%;
      background: $color-primary;
      z-index: -1;
    }
    h2 {
      color: $color-white;
      line-height: 1.3;
      margin-top: -10px;
      margin-bottom: 15px;
    }
    p {
      color: $color-white;
      margin-bottom: 30px;
    }
    .primary-btn {
      background: $color-white;
    }
  }
  .custom-owl-nav {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.strong-service-slider {
  .slider-item {
    padding: 58px 30px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    max-width: 350px;
    background: rgba(26, 26, 26, 0.8);
    transition: $transition;
    > i {
      width: 60px;
      height: 60px;
      line-height: 57px;
      margin-bottom: 18px;
      background: $color-white;
      text-align: center;
      display: block;
      img {
        display: inline-block;
        max-width: 32px;
      }
    }
    h3 {
      margin-bottom: 10px;
      a {
        color: $color-white;
        &:hover {
          color: $color-primary;
        }
      }
    }
    p {
      margin-bottom: 20px;
      color: $color-light;
    }
    .read-more-btn {
      color: $color-white;
      i {
        vertical-align: -2px;
        color: $color-primary;
      }
      &:hover {
        color: $color-primary;
      }
    }
  }
  .owl-nav {
    position: absolute;
    left: -10%;
    bottom: 0;
  }
  .slider-item:hover {
    border: 2px solid rgba(255, 255, 255, 0.8);
  }
}

.best-service-section {
  background: url(../img/bg-map-1.png) no-repeat center;
  background-size: cover;
  .section-title {
    h2 {
      margin-top: -10px;
    }
  }
  .service-item-single {
    position: relative;
    padding: 50px 30px;
    margin-bottom: 30px;
    border: 2px solid $color-secondary;
    overflow: hidden;
    background: transparent;
    transition: $transition;
    &::before {
      position: absolute;
      content: "";
      top: -50px;
      right: -50px;
      border-top: 100px solid $color-primary;
      border-left: 100px solid transparent;
      transition: $transition;
    }
    > i {
      width: 60px;
      height: 60px;
      line-height: 57px;
      margin-bottom: 18px;
      background: $color-primary;
      text-align: center;
      display: block;
      img {
        display: inline-block;
        max-width: 32px;
      }
    }
    h3 {
      a {
        color: $color-secondary;
      }
      margin-bottom: 5px;
    }
    p {
      margin-bottom: 20px;
      color: $color-dark;
    }
    .read-more-btn {
      color: $color-dark;
      i {
        vertical-align: -2px;
        color: $color-primary;
      }
    }
    &:hover {
      background: $color-secondary;
      &::before {
        top: 15px;
        right: 15px;
      }
      > i {
        background: $color-white;
      }
      h3 {
        a {
          color: $color-white;
          &:hover {
            color: $color-primary;
          }
        }
      }
      p {
        color: $color-light;
      }
      .read-more-btn {
        color: $color-white;
        &:hover {
          color: $color-primary;
        }
      }
    }
  }
}
.best-service-section.service-two {
  .service-item-single {
    background: $bg-primary;
    text-align: center;
    &:hover {
      background: $color-secondary;
    }
    > i {
      margin-left: auto;
      margin-right: auto;
    }
  }
}

.about-services-section {
  position: relative;
  z-index: 1;
  background: url(../img/service-bg-1.jpg) no-repeat center;
  background-size: cover;
  &::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 30, 76, 0.7);
    z-index: -1;
  }
  .service-item-single {
    position: relative;
    padding: 50px 30px;
    margin-bottom: 30px;
    transition: $transition;
    text-align: center;
    background: $color-white;
    z-index: 1;
    &::before {
      position: absolute;
      content: "";
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      opacity: 0.09;
      background: url(../img/service-bg-shape.png) no-repeat center;
      z-index: -1;
    }
    > i {
      width: 60px;
      height: 60px;
      line-height: 57px;
      margin-bottom: 15px;
      background: $color-primary;
      display: block;
      margin-left: auto;
      margin-right: auto;
      img {
        display: inline-block;
        max-width: 32px;
      }
    }
    h3 {
      a {
        color: $color-secondary;
      }
      margin-bottom: 10px;
    }
    p {
      color: $color-dark;
    }
  }
}

/* -----------------------------------------
  Works CSS
----------------------------------------- */
.our-works-section {
  position: relative;
  overflow: hidden;
  z-index: 1;
  &::after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 40%;
    height: 40%;
    background: $color-primary;
    z-index: -1;
  }
  .works-content {
    h2 {
      margin-bottom: 25px;
      line-height: 1.3;
      span {
        color: $color-primary;
      }
    }
    p {
      margin-bottom: 20px;
    }
    .works-item {
      .works-item-single {
        display: flex;
        align-items: center;
        position: relative;
        padding: 35px 60px;
        margin-bottom: 15px;
        background: url(../img/item-bg-2.jpg) no-repeat center;
        background-size: cover;
        max-width: calc(100% - 60px);
        justify-content: center;
        &:first-child {
          background: url(../img/item-bg-1.jpg) no-repeat center;
          background-size: cover;
        }
        &:last-child {
          background: url(../img/item-bg-3.jpg) no-repeat center;
          background-size: cover;
        }
        &::after {
          position: absolute;
          content: "";
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(26, 26, 26, 0.8);
        }
        &::before {
          position: absolute;
          content: "";
          left: 50%;
          bottom: -30px;
          transform: translateX(-50%);
          border-left: 20px solid transparent;
          border-right: 20px solid transparent;
          border-top: 30px solid $color-primary;
          z-index: 1;
        }

        i {
          width: 60px;
          height: 60px;
          line-height: 57px;
          background: $color-white;
          text-align: center;
          display: inline-block;
          z-index: 1;
          img {
            width: 32px;
          }
        }
        .content {
          padding-left: 16px;
          z-index: 1;
          h4 {
            color: $color-white;
            margin-bottom: 0;
          }
        }
        &:last-child {
          margin-bottom: 0;
          &::before {
            display: none;
          }
        }
      }
    }
  }
  .works-image {
    height: calc(100% - 15px);
    background: url("../img/video-img-1.jpg") no-repeat center;
    background-size: cover;
    position: relative;
    z-index: 1;
    &::after {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(26, 26, 26, 0.5);
      z-index: -2;
    }
    &::before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      bottom: -15px;
      left: -15px;
      border-bottom: 170px solid rgba(255, 188, 19, 0.8);
      border-right: 170px solid transparent;
      z-index: -1;
    }
    img {
      opacity: 0;
    }
    .video-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 90px;
      height: 90px;
      background-color: $color-primary;
      border-radius: 50%;
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      i {
        color: $color-white;
      }
      &::after,
      &::before {
        z-index: -1;
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        animation: ripple 3s linear infinite;
        opacity: 0;
        border-radius: 50%;
        background: $color-primary;
      }
      &::before {
        animation-delay: 1s;
      }
    }
  }
}

/* -----------------------------------------
  Projects CSS
----------------------------------------- */
.finished-projects-section {
  position: relative;
  z-index: 1;
  .bg-image {
    overflow: hidden;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 413px;
      z-index: -1;
      object-fit: cover;
    }
    &::after {
      position: absolute;
      content: "";
      left: 0;
      top: -1px;
      width: 100%;
      height: 415px;
      background: rgba(255, 249, 233, 0.95);
      z-index: -1;
    }
  }
  .finished-projects-slider {
    margin-bottom: 40px;
    .slider-item {
      overflow: hidden;
      .overlay-content {
        position: absolute;
        overflow: hidden;
        width: calc(100% - 30px);
        height: calc(100% - 30px);
        top: 15px;
        left: 15px;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: capitalize;
        transition: $transition;
        background: rgba(26, 26, 26, 0.7);
        &::before {
          position: absolute;
          content: "";
          top: -50px;
          right: -50px;
          border-top: 100px solid rgba(255, 188, 19, 0.8);
          border-left: 100px solid transparent;
          transition: $transition;
        }
        h3 {
          a {
            color: $color-white;
            &:hover {
              color: $color-primary;
            }
          }
        }
      }
      .image img {
        transition: $transition;
      }
      &:hover {
        img {
          transform: scale(1.1);
        }
        .overlay-content {
          opacity: 1;
          &::before {
            top: 10px;
            right: 10px;
          }
        }
      }
    }
    .owl-nav {
      position: absolute;
      right: 0;
      top: -60px;
      margin-top: -40px;
    }
  }
}

.finished-projects-section.style-two {
  .bg-image {
    &::after {
      background: rgba(0, 30, 76, 0.78);
    }
  }
  .section-title {
    h2 {
      color: $color-white;
    }
  }
  .slider-item {
    .overlay-content {
      background: rgba(0, 30, 76, 0.7);
      &::after {
        position: absolute;
        content: "";
        bottom: -50px;
        left: -50px;
        border-bottom: 100px solid $color-primary;
        border-right: 100px solid transparent;
        transition: $transition;
      }
    }
    &:hover {
      .overlay-content {
        &::after {
          bottom: 10px;
          left: 10px;
        }
      }
    }
  }
}

.projects-section {
  .projects-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    .overlay-content {
      position: absolute;
      overflow: hidden;
      width: calc(100% - 30px);
      height: calc(100% - 30px);
      top: 15px;
      left: 15px;
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-transform: capitalize;
      text-align: center;
      transition: $transition;
      background: rgba(0, 30, 76, 0.7);
      &::after {
        position: absolute;
        content: "";
        bottom: -50px;
        left: -50px;
        border-bottom: 100px solid $color-primary;
        border-right: 100px solid transparent;
        transition: $transition;
      }
      &::before {
        position: absolute;
        content: "";
        top: -50px;
        right: -50px;
        border-top: 100px solid rgba(255, 188, 19, 0.8);
        border-left: 100px solid transparent;
        transition: $transition;
      }
      h3 {
        a {
          color: $color-white;
          &:hover {
            color: $color-primary;
          }
        }
      }
      p {
        color: $color-light;
      }
    }
    .image img {
      transition: $transition;
    }
    &:hover {
      img {
        transform: scale(1.1);
      }
      .overlay-content {
        opacity: 1;
        &::before {
          top: 10px;
          right: 10px;
        }
        &::after {
          bottom: 10px;
          left: 10px;
        }
      }
    }
  }
}
/* -----------------------------------------
  Team CSS
----------------------------------------- */
.team-section {
  position: relative;
  overflow: hidden;
  z-index: 1;
  .team-content {
    margin-bottom: 30px;
    padding: 98px 0;
    position: relative;
    z-index: 1;
    &::after {
      position: absolute;
      content: "";
      left: -60px;
      top: 0;
      width: 40%;
      height: 100%;
      background: $color-primary;
      z-index: -1;
    }
    h2 {
      line-height: 1.3;
      margin-top: -10px;
      margin-bottom: 15px;
    }
    p {
      margin-bottom: 30px;
    }
    .primary-btn {
      color: $color-white;
      background: $color-dark;
      &:hover {
        color: $color-dark;
        &::before,
        &::after {
          background: $color-white;
          height: 100%;
        }
      }
    }
  }
}

.team-slider {
  .slider-item {
    overflow: hidden;
    max-width: 350px;
    .image {
      margin: 0 10px 0;
      overflow: hidden;
      img {
        transition: $transition;
      }
    }
    .content {
      position: relative;
      overflow: hidden;
      padding: 16px;
      text-align: center;
      background: $color-dark;
      h3 {
        margin-bottom: 0;
        a {
          color: $color-white;
          &:hover {
            color: $color-primary;
          }
        }
      }
      span {
        color: $color-light;
      }
    }
    .overlay-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      padding: 25px;
      transition: $transition;
      &::before {
        position: absolute;
        content: "";
        top: -100px;
        right: 0;
        border-top: 100px solid rgba(255, 188, 19, 0.8);
        border-left: 100px solid transparent;
        transition: $transition;
      }
      .social-link {
        display: inline-block;
        a {
          display: block;
          line-height: 0;
          text-align: center;
          background: $color-dark;
          color: $color-primary;
          padding: 12px;
          font-size: 12px;
          margin-bottom: 8px;
          margin-right: unset;
          transform: rotateY(90deg);
          &:hover {
            background: $color-primary;
            color: $color-dark;
          }
        }
      }
    }
    &:hover {
      .image {
        img {
          transform: scale(1.1);
        }
      }
      .overlay-content {
        opacity: 1;
        &::before {
          top: -10px;
        }
        a {
          transform: rotateY(0);
        }
      }
    }
  }
  .owl-nav {
    position: absolute;
    left: -10%;
    bottom: 0;
  }
}

.team-section.team-two {
  background: unset;
  @extend .team-section;
  .content {
    text-align: center;
    background: $color-secondary;
  }
  .overlay-content {
    height: 70%;
    left: 30px;
    top: 30px;
    width: calc(100% - 60px);
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    &::before {
      content: unset;
    }
    .social-link {
      a {
        margin: unset;
        margin-right: 8px;
        display: inline-block;
        background: $color-secondary;
      }
    }
  }
  .cta-btn {
    .primary-btn {
      color: $color-white;
      background: $color-secondary;
      &::before,
      &::after {
        background-color: $color-primary;
      }
      &:hover {
        color: $color-white;
      }
    }
  }
}

.team-members-section {
  .team-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    .image {
      margin: 10px 10px 0;
      overflow: hidden;
      img {
        transition: $transition;
      }
    }
    .content {
      position: relative;
      overflow: hidden;
      padding: 16px;
      text-align: center;
      background: $color-secondary;
      &::before {
        position: absolute;
        content: "";
        right: 0;
        top: 0;
        border-bottom: 100px solid $color-primary;
        border-left: 100px solid transparent;
      }
      &::after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        border-top: 100px solid $color-primary;
        border-right: 100px solid transparent;
      }
      h3 {
        a {
          color: $color-white;
          &:hover {
            color: $color-primary;
          }
        }
      }
      span {
        color: $color-light;
      }
    }
    .overlay-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      padding: 25px;
      transition: $transition;
      &::before {
        position: absolute;
        content: "";
        top: -100px;
        right: 0;
        border-top: 100px solid rgba(255, 188, 19, 0.8);
        border-left: 100px solid transparent;
        transition: $transition;
      }
      .social-link {
        display: inline-block;
        a {
          display: block;
          line-height: 0;
          text-align: center;
          background: $color-secondary;
          color: $color-primary;
          padding: 12px;
          font-size: 12px;
          margin-bottom: 8px;
          margin-right: unset;
          transform: rotateY(90deg);
          &:hover {
            background: $color-primary;
            color: $color-dark;
          }
        }
      }
    }
    &:hover {
      .image {
        img {
          transform: scale(1.1);
        }
      }
      .overlay-content {
        opacity: 1;
        &::before {
          top: -10px;
        }
        a {
          transform: rotateY(0);
        }
      }
    }
  }
}
/* -----------------------------------------
  Testimonials CSS
----------------------------------------- */
.testimonial-section {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: url(../img/testimonial-bg.jpg) no-repeat top;
  &::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-height: 413px;
    background: rgba(26, 26, 26, 0.7);
    z-index: -1;
  }
  .testimonial-image {
    position: absolute;
    width: 100%;
    padding-right: 30px;
    img {
      width: 100%;
      height: unset;
    }
  }
  .team-content {
    h2 {
      margin-bottom: 25px;
      color: $color-white;
    }
  }
  .testimonial-slider {
    background: $bg-fff3cf;
    .slider-item {
      display: flex;
      flex: 1;
      display: -ms-block;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding: 50px 70px;
      i {
        font-size: 50px;
      }
      p {
        font-size: 25px;
        color: $color-dark;
        font-weight: 600;
        margin-top: 20px;
        margin-bottom: 20px;
        line-height: 1.6;
      }
      .client-img {
        position: relative;
        margin-bottom: 20px;
        &::after {
          position: absolute;
          content: "";
          right: -5px;
          bottom: -5px;
          border-bottom: 40px solid $color-primary;
          border-left: 40px solid transparent;
          z-index: -1;
        }
      }
      .client-info {
        h6 {
          margin: 0;
          font-size: 18px;
        }
      }
    }
    .owl-nav {
      position: absolute;
      right: -15%;
      top: 30%;
    }
  }
}
.testimonial-section.testimonial-two {
  &::after {
    background: rgba(0, 30, 76, 0.7);
  }
  .testimonial-slider {
    &::before {
      position: absolute;
      content: "";
      bottom: 10px;
      right: 10px;
      border-bottom: 100px solid $color-primary;
      border-left: 100px solid transparent;
      transition: $transition;
      z-index: 1;
    }
    &::after {
      position: absolute;
      content: "";
      top: 10px;
      left: 10px;
      border-top: 100px solid $color-primary;
      border-right: 100px solid transparent;
      transition: $transition;
      z-index: 1;
    }
  }
  .section-title {
    h2 {
      color: $color-white;
    }
  }
  .owl-nav {
    position: unset;
    right: unset;
    top: unset;
    button {
      top: 50%;
      transform: translateY(-50%);
      position: absolute;
    }
    .owl-prev {
      left: -50px;
    }
    .owl-next {
      right: -50px;
    }
  }
}

.testimonial-section.testimonial-three {
  background: $bg-primary;
  background: unset;
  .section-title {
    h2 {
      margin-top: -10px;
    }
  }
  &::after {
    content: none;
    content: unset;
  }
  @extend .testimonial-two;
}

/* -----------------------------------------
  Blog CSS
----------------------------------------- */
.blog-section {
  .owl-nav {
    position: absolute;
    right: 0;
    top: -60px;
    margin-top: -40px;
  }
}
.blog-item-single {
  margin-bottom: 30px;
  background: $color-white;
  .blog-item-img {
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    .overlay-content {
      position: absolute;
      overflow: hidden;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      top: 10px;
      left: 10px;
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: capitalize;
      transition: $transition;
      background: rgba(26, 26, 26, 0.7);
      &::before {
        position: absolute;
        content: "";
        top: -50px;
        right: -50px;
        border-top: 100px solid rgba(255, 188, 19, 0.8);
        border-left: 100px solid transparent;
        transition: $transition;
      }
      &::after {
        position: absolute;
        content: "";
        bottom: -50px;
        left: -50px;
        border-bottom: 100px solid rgba(255, 188, 19, 0.8);
        border-right: 100px solid transparent;
        transition: $transition;
      }
      a {
        font-size: 32px;
        color: $color-white;
        &:hover {
          color: $color-primary;
        }
      }
    }
    .image img {
      transition: $transition;
    }
    &:hover {
      .overlay-content {
        opacity: 1;
        &::before {
          top: 10px;
          right: 10px;
        }
        &::after {
          bottom: 10px;
          left: 10px;
        }
      }
    }
  }
  .blog-item-img {
    .tag {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 6px 6px 8px;
      text-align: center;
      background: $color-dark;
      span {
        font-size: 18px;
        font-weight: 500;
        display: block;
        &:first-child {
          border-bottom: 2px solid $color-medium;
          color: $color-white;
        }
        &:last-child {
          color: $color-primary;
        }
      }
    }
  }
  .blog-item-content {
    padding: 0 15px 20px 15px;
  }
  .read-more-btn {
    font-weight: 600;
    i {
      vertical-align: -2px;
      color: $color-primary;
    }
  }
}

.blog-grid {
  @extend .blog-section;
  .blog-item-img {
    .overlay-content {
      background: rgba(0, 30, 76, 0.7);
    }
  }
}
/* -----------------------------------------
  Partner CSS
----------------------------------------- */
.partner-area {
  .partner-slider {
    .slider-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        cursor: pointer;
        width: auto;
        transition: $transition;
        &:last-child {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          opacity: 0;
        }
      }
      &:hover {
        img {
          &:first-child {
            opacity: 0;
          }
          &:last-child {
            opacity: 1;
          }
        }
      }
    }
  }
}
.partner-two {
  @extend .partner-area;
  padding: 15px 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: url(../img/service-bg-1.jpg) no-repeat center;
  background-size: cover;
  &::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    background: $bg-secondary;
    z-index: -1;
  }
  .partner-slider {
    .slider-item {
      transition: $transition;
      padding: 40px 20px;
      &:hover {
        background: $color-secondary;
      }
      img {
        &:last-child {
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}

/* -----------------------------------------
  Newsletter CSS
----------------------------------------- */
.newsletter-section {
  position: relative;
  background: url(../img/newsletter-bg-1.jpg) no-repeat center;
  background-size: cover;
  background-position: top;
  z-index: 1;
  &::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 26, 0.5);
    z-index: -1;
  }
  &::before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: rgba(26, 26, 26, 0.9);
    z-index: -1;
  }
  .newsletter-content {
    padding-left: 30px;
    h2 {
      color: $color-white;
      line-height: 1.3;
      margin-top: -10px;
      margin-bottom: 15px;
    }
    p {
      color: $color-light;
      margin-bottom: 30px;
    }
    .newsletter-form {
      .form-control {
        color: $color-light;
        height: auto;
        background: transparent;
        border-radius: 0;
        border: 1px solid $color-primary;
      }
    }
  }
}
.validation-danger,
.validation-success {
  position: relative;
  padding: 10px;
  width: 50%;
  margin-top: 15px;
  text-align: center;
}
.validation-danger {
  color: $color-white;
  background: var(--danger);
  &::after {
    position: absolute;
    content: "";
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid var(--danger);
  }
}
.validation-success {
  color: $color-white;
  background: var(--success);
}

.help-block ul li {
  position: relative;
  padding: 5px;
  width: 50%;
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: $color-white;
  background: var(--danger);
  &::after {
    position: absolute;
    content: "";
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 16px solid var(--danger);
  }
}
#msgSubmit {
  font-size: 20px;
  margin-top: 8px;
}

.newsletter-section.newsletter-two {
  background: unset;
  &::before {
    content: unset;
  }
  &::after {
    content: unset;
  }
  .content-container {
    position: relative;
    z-index: 1;
    background: url(../img/newsletter-bg-2.jpg) no-repeat center;
    position: relative;
    background-size: cover;
    &::after {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: -moz-linear-gradient(
        left,
        rgba(26, 26, 26, 0.9) 0%,
        rgba(26, 26, 26, 0.3) 100%
      );
      background: -webkit-linear-gradient(
        left,
        rgba(26, 26, 26, 0.9) 0%,
        rgba(26, 26, 26, 0.3) 100%
      );
      background: linear-gradient(
        to right,
        rgba(26, 26, 26, 0.9) 0%,
        rgba(26, 26, 26, 0.3) 100%
      );
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e61a1a1a', endColorstr='#4d1a1a1a',GradientType=1 );
    }
  }
  .newsletter-content {
    h2 {
      margin-bottom: 20px;
    }
  }
}

.newsletter-section.newsletter-three {
  @extend .newsletter-section;
  background: url(../img/newsletter-bg-1.jpg) no-repeat center;
  background-size: cover;
  background-position: top;
  &::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(
      left,
      rgba(0, 30, 76, 0.9) 0%,
      rgba(0, 30, 76, 0.3) 100%
    );
    background: -webkit-linear-gradient(
      left,
      rgba(0, 30, 76, 0.9) 0%,
      rgba(0, 30, 76, 0.3) 100%
    );
    background: linear-gradient(
      to right,
      rgba(0, 30, 76, 0.9) 0%,
      rgba(0, 30, 76, 0.3) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6001e4c', endColorstr='#4d001e4c',GradientType=1 );
    z-index: -1;
  }
  &::before {
    content: unset;
  }
  .newsletter-content {
    h2 {
      margin-bottom: 20px;
    }
  }
  .newsletter-content {
    padding-left: 0;
  }
}
/* -----------------------------------------
  Instrument CSS
----------------------------------------- */
.instrument-section {
  position: relative;
  overflow: hidden;
  .instrument-content {
    max-width: 420px;
    margin-bottom: 30px;
    padding-right: 15px;
    h2 {
      margin-bottom: 25px;
      line-height: 1.3;
      span {
        color: $color-primary;
      }
    }
    p {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .video-content {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100%;
    margin-bottom: 30px;
    .video-btn {
      position: relative;
      display: block;
      text-align: center;
      width: 90px;
      height: 90px;
      line-height: 90px;
      background-color: $color-primary;
      border-radius: 50%;
      z-index: 1;
      margin-left: auto;
      margin-right: auto;
      i {
        color: $color-white;
      }
      &::after,
      &::before {
        z-index: -1;
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        animation: ripple 2s infinite;
        opacity: 0;
        border-radius: 50%;
        background: $color-primary;
      }
      &::after {
        animation-delay: 0.4s;
      }
      &::before {
        animation-delay: 0.9s;
      }
    }
    .video-image {
      position: absolute;
      width: 100%;
      &::after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(26, 26, 26, 0.5);
      }
      img {
        width: 100%;
        max-width: unset;
      }
    }
  }
  .instrument-slider {
    .slider-item {
      overflow: hidden;
      .overlay-content {
        position: absolute;
        overflow: hidden;
        width: calc(100% - 30px);
        height: calc(100% - 30px);
        top: 15px;
        left: 15px;
        opacity: 0;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        text-transform: capitalize;
        transition: $transition;
        background: rgba(0, 30, 76, 0.7);
        &::before {
          position: absolute;
          content: "";
          top: -50px;
          right: -50px;
          border-top: 100px solid $color-primary;
          border-left: 100px solid transparent;
          transition: $transition;
        }
        &::after {
          position: absolute;
          content: "";
          bottom: -50px;
          left: -50px;
          border-bottom: 100px solid $color-primary;
          border-right: 100px solid transparent;
          transition: $transition;
        }
        h3 {
          a {
            color: $color-white;
            &:hover {
              color: $color-primary;
            }
          }
        }
      }
      .image img {
        transition: $transition;
      }
      &:hover {
        img {
          transform: scale(1.1);
        }
        .overlay-content {
          opacity: 1;
          &::before {
            top: 10px;
            right: 10px;
          }
          &::after {
            bottom: 10px;
            left: 10px;
          }
        }
      }
    }
    .owl-nav {
      margin-top: 30px;
      text-align: center;
    }
  }
}

/* -----------------------------------------
  Map CSS
----------------------------------------- */
.map-section {
  overflow: hidden;
  .map-content {
    position: relative;
    .map-pin {
      position: absolute;
      cursor: pointer;
      width: 52px;
      transition: $transition;
      .pin-content {
        position: absolute;
        top: -50px;
        right: -170px;
        padding: 16px 16px;
        border-radius: 5px;
        opacity: 0;
        visibility: hidden;
        color: $color-white;
        background: $color-pink;
        transform: rotateY(90deg);
        transition: $transition;
        z-index: 1;
      }
      &:hover {
        width: 62px;
        .pin-content {
          opacity: 1;
          visibility: visible;
          transform: unset;
        }
      }
    }
    .active {
      .pin-content {
        opacity: 1;
        visibility: visible;
        transform: unset;
      }
    }
    .pin-1 {
      left: 20%;
    }
    .pin-2 {
      right: 20%;
    }
    .pin-3 {
      top: 35%;
    }
    .pin-4 {
      top: 30%;
      left: 50%;
    }
    .pin-5 {
      bottom: 0;
      left: 30%;
    }
    .pin-6 {
      right: 0;
      bottom: 0;
      .pin-content {
        left: -170px;
        right: unset;
      }
    }
  }
}

/* -----------------------------------------
  Amazing Projects CSS
----------------------------------------- */
.amazing-projects-section {
  position: relative;
  overflow: hidden;
  .projects-content {
    margin-bottom: 30px;
    padding: 83px 0;
    position: relative;
    z-index: 1;
    &::after {
      position: absolute;
      content: "";
      left: -60px;
      top: 0;
      width: 40%;
      height: 100%;
      background: $color-primary;
      z-index: -1;
    }
    h2 {
      color: $color-secondary;
      line-height: 1.3;
      margin-top: -10px;
      margin-bottom: 15px;
    }
    p {
      margin-bottom: 30px;
    }
    .primary-btn {
      color: $color-white;
      background: $color-secondary;
    }
  }
}

.amazing-projects-slider {
  margin-bottom: 30px;
  .slider-item {
    overflow: hidden;
    .overlay-content {
      position: absolute;
      overflow: hidden;
      width: calc(100% - 30px);
      height: calc(100% - 30px);
      top: 15px;
      left: 15px;
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: capitalize;
      transition: $transition;
      background: rgba(26, 26, 26, 0.7);
      &::before {
        position: absolute;
        content: "";
        top: -50px;
        right: -50px;
        border-top: 100px solid rgba(255, 188, 19, 0.8);
        border-left: 100px solid transparent;
        transition: $transition;
      }
      h3 {
        a {
          color: $color-white;
          &:hover {
            color: $color-primary;
          }
        }
      }
    }
    .image img {
      transition: $transition;
    }
    &:hover {
      img {
        transform: scale(1.1);
      }
      .overlay-content {
        opacity: 1;
        &::before {
          top: 10px;
          right: 10px;
        }
      }
    }
  }
  .owl-nav {
    position: absolute;
    left: -10%;
    bottom: 0;
  }
}

/* -----------------------------------------
  Build CSS
----------------------------------------- */
.renovate-section {
  position: relative;
  z-index: 1;
  &::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 40%;
    height: 60%;
    background: $color-primary;
    z-index: -1;
  }
  .content {
    margin-bottom: 30px;
    h2 {
      margin-bottom: 25px;
      margin-top: -10px;
      line-height: 1.3;
      span {
        color: $color-primary;
      }
    }
    p {
      &:nth-child(3) {
        margin-bottom: 25px;
      }
      &:nth-child(5) {
        margin-bottom: 30px;
      }
    }
    .item-list {
      margin-bottom: 25px;
      ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
        li {
          display: block;
          font-weight: 500;
          margin-bottom: 6px;
          padding-left: 25px;
          position: relative;
          line-height: 1.8;
          color: $color-dark;
          &:last-child {
            margin-bottom: 0;
          }
          i {
            margin-left: -25px;
            margin-right: 5px;
            color: $color-primary;
            vertical-align: -2px;
          }
        }
      }
    }
    .cta-btn {
      .primary-btn {
        color: $color-white;
        background: $color-secondary;
        &::before,
        &::after {
          background-color: $color-primary;
        }
        &:hover {
          color: $color-white;
        }
      }
    }
  }
  .image-content {
    margin-bottom: 30px;
    position: relative;
    &::before {
      position: absolute;
      content: "";
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 30px solid $color-secondary;
      z-index: 1;
    }
  }
}
.build-section {
  @extend .renovate-section;
  &::after {
    position: absolute;
    content: "";
    left: none !important;
    left: unset;
    right: 0 !important;
    top: 0;
    width: 40%;
    height: 60%;
    background: $color-primary;
    z-index: -1;
  }
}

/* -----------------------------------------
  Quote CSS
----------------------------------------- */
.quote-section {
  position: relative;
  z-index: 1;
  background: url(../img/testimonial-bg.jpg) no-repeat top;
  &::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-height: 413px;
    background: rgba(0, 30, 76, 0.7);
    z-index: -1;
  }
  .contact-form {
    position: relative;
    padding: 45px;
    background: $bg-fff3cf;
    margin-bottom: 30px;
    &::after {
      position: absolute;
      content: "";
      top: 10px;
      left: 10px;
      border-top: 100px solid $color-primary;
      border-right: 100px solid transparent;
      transition: $transition;
      z-index: 1;
    }
    h2 {
      text-align: center;
      margin-bottom: 25px;
      margin-top: -10px;
      line-height: 1.3;
      span {
        color: $color-primary;
      }
    }
    .primary-btn {
      width: 100%;
    }
    .nice-select {
      float: unset;
      line-height: 58px;
      color: $color-light2;
      text-transform: capitalize;
      padding-top: 0;
      padding-bottom: 0;
      .list {
        background-color: #ffffff;
        box-shadow: 0px 0px 29px 0px rgba(102, 102, 102, 0.1);
        border-radius: 0;
        margin-top: -1px;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        .option {
          transition: 0.6s;
          color: $color-light2;
          font-size: 14px;
          line-height: 25px;
          padding-top: 10px;
          padding-bottom: 10px;
          padding-left: 20px;
          padding-right: 10px;
        }
        .option.selected {
          background-color: transparent;
          font-weight: 500;
          color: $color-medium;
        }
      }
      &::after {
        border: none;
        transform: rotate(0deg);
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 8px solid $color-primary;
      }
    }
    .open:after {
      border-top: none;
      border-bottom: 8px solid $color-primary;
    }
  }
  .image {
    margin-bottom: 30px;
  }
}
.form-check {
  padding-left: 0;
}

/* -----------------------------------------
  Faq CSS
----------------------------------------- */
.faq-section {
  background-color: #dcd7ca !important;
  background: url(../img/faq-bg.png) no-repeat center;
  background-size: cover;
  .panel-group {
    margin-bottom: 15px;
    .panel {
      border-radius: 0;
      margin-bottom: 15px;
      overflow: hidden;
      .panel-heading {
        padding: 0;
        background: $color-white;
        position: relative;
      }
    }
    .panel-title {
      margin: 0;
      a {
        display: block;
        padding: 25px 20px;
        font-size: 16px;
        font-weight: 600;
        color: $color-dark;
        &:before {
          content: "";
          position: absolute;
          top: 50%;
          right: 20px;
          border-top: none;
          border-bottom: 8px solid $color-primary;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          transform: translateY(-50%);
        }
      }
      a.collapsed {
        &:before {
          content: "";
          position: absolute;
          top: 50%;
          right: 20px;
          border-bottom: none;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-top: 8px solid $color-primary;
          transform: translateY(-50%);
        }
        &::after {
          content: "";
          position: absolute;
          top: 5px;
          height: calc(100% - 10px);
          left: 6px;
          width: 2px;
          background: $color-primary;
        }
      }
    }
    .panel-body {
      padding: 25px 20px;
      border: 0;
      background: $color-white;
      position: relative;
      margin-top: 2px;
      &::after {
        content: "";
        position: absolute;
        top: 5px;
        height: calc(100% - 10px);
        left: 6px;
        width: 2px;
        background: $color-primary;
      }
      p {
        color: $color-dark;
        margin: 0;
      }
    }
  }
}
/* -----------------------------------------
  Count CSS
----------------------------------------- */
.count-section {
  position: relative;
  overflow: hidden;
  background: url(../img/count-bg.png) no-repeat center;
  background-size: cover;
  &:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: $bg-secondary;
    z-index: -1;
  }
  .content {
    position: relative;
    overflow: hidden;
    padding: 80px 20px;
    text-align: center;
    z-index: 1;
    margin-bottom: 30px;
    &:after {
      position: absolute;
      content: "";
      left: 10px;
      top: 10px;
      border-top: 100px solid $color-primary;
      border-right: 100px solid transparent;
    }
    &::before {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 30, 76, 0.9);
      z-index: -1;
    }
    h2 {
      line-height: 1.3;
      margin: 0;
      margin-top: -5px;
      color: $color-primary;
      span {
        color: $color-primary;
      }
    }
    span {
      color: $color-white;
    }
  }
  [class*="col-"]:nth-child(1) .content {
    background: url(../img/item-bg-1.jpg) no-repeat center;
    background-size: cover;
  }
  [class*="col-"]:nth-child(2) .content {
    background: url(../img/item-bg-2.jpg) no-repeat center;
    background-size: cover;
  }
  [class*="col-"]:nth-child(3) .content {
    background: url(../img/item-bg-3.jpg) no-repeat center;
    background-size: cover;
  }
  [class*="col-"]:nth-child(4) .content {
    background: url(../img/project-bg-1.jpg) no-repeat center;
    background-size: cover;
  }
}

/* -----------------------------------------
  Blog Details CSS
----------------------------------------- */
.blog-details-area {
  overflow: hidden;
  .blog-details-desc {
    padding-left: 40px;
    margin-bottom: 30px;
    .image {
      margin-bottom: 25px;
    }
    .content {
      margin-bottom: 25px;
      h2 {
        font-size: 40px;
        line-height: 1.3;
        margin-top: -5px;
        color: $color-secondary;
        margin-bottom: 20px;
        text-transform: capitalize;
      }
      p {
        color: $color-medium;
      }
    }

    .post-meta {
      padding: 0;
      margin: 0;
      margin-bottom: 25px;
      li {
        color: $color-secondary;
        display: inline-block;
        font-weight: 500;
        font-size: 14px;
        margin-right: 10px;
        padding: 8px 10px;
        background: $color-primary;
        &:last-child {
          margin-right: 0px;
        }
        &:hover {
          a {
            color: $color-white;
          }
        }
      }
    }

    .blog-details-slider {
      margin-bottom: 25px;
      position: relative;
      .owl-nav {
        position: absolute;
        right: 20px;
        bottom: 20px;
      }
    }

    .article-share {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: row;
      margin-bottom: 25px;
      span {
        color: $color-dark;
        text-transform: capitalize;
        margin-right: 5px;
        font-weight: 600;
      }
    }

    .social-link {
      a {
        font-size: 14px;
        padding: 8px 12px;
        margin-right: 5px;
        &:last-child {
          margin-right: 0;
        }
      }
    }

    hr {
      margin-top: 0;
      margin-bottom: 25px;
    }

    .comment-reply {
      #commentForm {
        .form-control {
          background: $bg-secondary;
          border: 1px solid $color-primary;
        }
        .primary-btn {
          width: 100%;
          color: $color-white;
          background: $color-secondary;
          &::before,
          &::after {
            background-color: $color-primary;
          }
          &:hover {
            color: $color-white;
          }
        }
      }
    }
    .comments-area {
      margin-bottom: 25px;
      .comment-list {
        padding: 0;
        margin: 0;
        list-style-type: none;
        .comment {
          margin-bottom: 15px;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      .comment-body {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: row;
        background: $bg-secondary;
        padding: 20px 15px;
        .comment-author {
          overflow: hidden;
          .avatar {
            width: 90px;
          }
        }

        .comment-content {
          padding-left: 16px;

          .comment-metadata {
            .name {
              color: $color-medium;
              font-size: 16px;
              font-weight: bold;
              margin: 0;
            }

            .time {
              color: $color-medium;
              font-size: 12px;
            }

            .reply {
              float: right;
              margin-top: -20px;
              .primary-btn {
                padding: 0 20px;
                color: $color-white;
              }
            }
          }

          p {
            margin-top: 5px;
            font-size: 15px;
          }
        }
      }
    }
  }

  .tags {
    a {
      display: inline-block;
      text-align: center;
      background: $bg-secondary;
      color: $color-dark;
      border: 1px solid $color-primary;
      padding: 8px 12px;
      font-size: 14px;
      margin-right: 5px;
      &:hover {
        color: $color-dark;
      }
      &:last-child {
        margin-right: 0px;
      }
    }
  }

  .widget-area {
    margin-bottom: 30px;
    .widget {
      margin-bottom: 25px;
    }
    .widget-gallery {
      margin-bottom: 10px;
    }
    .gallery-item {
      img {
        margin-bottom: 20px;
      }
    }
    .widget-search {
      .search-form {
        position: relative;
        background-color: $color-white;
        .search-field {
          color: $color-medium;
          display: block;
          width: 100%;
          height: 68px;
          padding: 0 0 0 15px;
          border: none;
          font-weight: 600;
          transition: $transition;
          background: $bg-secondary;
          border: 1px solid $color-primary;
          box-shadow: 0 0 20px -2px rgba(106, 99, 119, 0.1);
        }
        button {
          border: none;
          color: $color-secondary;
          position: absolute;
          right: 20px;
          top: 50%;
          font-size: 18px;
          transform: translateY(-50%);
          transition: $transition;
        }
      }
    }

    .widget-article {
      .article-item {
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        flex-direction: row;

        .info {
          padding-left: 16px;
        }
        .title {
          margin-top: 5px;
          font-size: 18px;
        }

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

    .widget-categories {
      .category-list {
        padding: 0;
        margin: 0;
        list-style-type: none;
        li {
          position: relative;
          padding: 12px 14px;
          background: $bg-secondary;
          margin-bottom: 16px;
          &:last-child {
            margin-bottom: 0;
          }
          a {
            font-weight: 600;
            text-transform: capitalize;
            color: $color-secondary;
          }
          i {
            vertical-align: middle;
            margin-right: 8px;
            color: $color-primary;
          }
        }
      }
    }
    .tags {
      a {
        margin-bottom: 10px;
      }
    }

    .contact-form {
      position: relative;
      padding: 25px 25px;
      background: $bg-fff3cf;
      .primary-btn {
        width: 100%;
        color: $color-white;
        background: $color-secondary;
        &::before,
        &::after {
          background-color: $color-primary;
        }
        &:hover {
          color: $color-white;
        }
      }
    }
  }

  h3.sub-title {
    line-height: 1;
    margin-bottom: 20px;
    text-transform: capitalize;
    color: $color-secondary;
  }
}

/* -----------------------------------------
  Page Title CSS
----------------------------------------- */
.page-title-area {
  position: relative;
  overflow: hidden;
  z-index: 1;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgba(0, 30, 76, 0.9)),
      to(rgba(0, 30, 76, 0.3))
    );
    background: linear-gradient(
      to right,
      rgba(0, 30, 76, 0.9) 0%,
      rgba(0, 30, 76, 0.3) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6001e4c', endColorstr='#4d001e4c',GradientType=1 );
    z-index: -1;
  }
  .bg-image {
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      object-fit: cover;
    }
  }

  .page-title-content {
    text-transform: capitalize;

    h1 {
      color: $color-white;
      margin-bottom: 20px;
      margin-top: -10px;
      line-height: 1.2;
    }

    ul {
      padding: 0;
      margin: 0;

      li {
        margin-right: 10px;
        padding-left: 15px;
        display: inline-block;

        &:first-child {
          padding-left: 0;
        }

        i {
          font-size: 14px;
          margin-left: -20px;
          margin-right: 10px;
          color: $color-primary;
          vertical-align: -1px;
        }

        a {
          color: $color-white;
          &:hover {
            color: $color-primary;
          }
        }
      }
    }
  }
}

/* -----------------------------------------
  Authentication CSS
----------------------------------------- */
.authentication-section {
  .authentication-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    overflow: hidden;
    .tab-item {
      color: $color-dark;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px 60px;
      border-bottom: 2px solid $color-light;
      cursor: pointer;
    }
    .tab-item.active {
      color: $color-primary;
      border-bottom: 2px solid $color-primary;
    }
  }
  .authentication-tabs-content {
    .tab-panel {
      display: none;
    }
    .tab-panel.active {
      display: block;
      animation: flipInY 1s 1 linear;
    }
  }
  .authentication-form {
    background: #ffffff;
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
    padding: 40px;
    border-radius: 5px;
    max-width: 600px;
    margin: auto;
    .checkbox {
      label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 20px;
        font-weight: 500;
        font-size: 14px;
        display: inline-block;
        margin-bottom: 0;
        color: $color-dark;
        a {
          color: $color-primary;
        }
      }
      [type="checkbox"]:checked,
      [type="checkbox"]:not(:checked) {
        display: none;
      }
      [type="checkbox"]:checked + label:after,
      [type="checkbox"]:not(:checked) + label:after {
        content: "";
        width: 8px;
        height: 8px;
        background: $color-primary;
        position: absolute;
        top: 5.5px;
        left: 6px;
        transition: $transition;
      }
      [type="checkbox"]:checked + label::before,
      [type="checkbox"]:not(:checked) + label::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 19px;
        height: 19px;
        border: 1px solid $bg-fff3cf;
        background: $bg-fff3cf;
        transition: $transition;
      }
      [type="checkbox"]:checked + label::before {
        border: 1px solid $color-primary;
        background: unset;
      }
      [type="checkbox"]:not(:checked) + label:after {
        display: none;
      }
    }
    .link {
      text-align: right;
      a {
        display: inline-block;
        font-weight: 500;
        font-size: 14px;
        line-height: 1.3;
      }
    }
  }
  .content {
    margin-bottom: 30px;
    text-align: center;
    .logo {
      margin-bottom: 20px;
    }
    h3 {
      font-size: 30px;
      margin-top: -7px;
      margin-bottom: 0;
      color: $color-secondary;
    }
  }
  .form-group {
    margin-bottom: 25px;
  }
  .form-control {
    background: $bg-secondary;
    border: 1px solid $color-primary;
  }
  .cta-btn {
    margin-top: 25px;
    .primary-btn {
      padding: 14.5px 30px;
      width: 100%;
    }
  }
}
.authentication-form {
  background: #ffffff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  padding: 40px;
  border-radius: 5px;
  max-width: 600px;
  margin: auto;
  .checkbox {
    label {
      position: relative;
      padding-left: 28px;
      cursor: pointer;
      line-height: 20px;
      font-weight: 500;
      font-size: 14px;
      display: inline-block;
      margin-bottom: 0;
      color: $color-dark;
      a {
        color: $color-primary;
      }
    }
    [type="checkbox"]:checked,
    [type="checkbox"]:not(:checked) {
      display: none;
    }
    [type="checkbox"]:checked + label:after,
    [type="checkbox"]:not(:checked) + label:after {
      content: "";
      width: 8px;
      height: 8px;
      background: $color-primary;
      position: absolute;
      top: 5.5px;
      left: 6px;
      transition: $transition;
    }
    [type="checkbox"]:checked + label::before,
    [type="checkbox"]:not(:checked) + label::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 19px;
      height: 19px;
      border: 1px solid $bg-fff3cf;
      background: $bg-fff3cf;
      transition: $transition;
    }
    [type="checkbox"]:checked + label::before {
      border: 1px solid $color-primary;
      background: unset;
    }
    [type="checkbox"]:not(:checked) + label:after {
      display: none;
    }
  }
  .link {
    text-align: right;
    a {
      display: inline-block;
      font-weight: 500;
      font-size: 14px;
      line-height: 1.3;
    }
  }
  .content {
    margin-bottom: 30px;
    text-align: center;
    .logo {
      margin-bottom: 20px;
    }
    h3 {
      font-size: 30px;
      margin-top: -7px;
      margin-bottom: 0;
      color: $color-secondary;
    }
  }
  .form-group {
    margin-bottom: 25px;
  }
  .form-control {
    background: $bg-secondary;
    border: 1px solid $color-primary;
  }
  .cta-btn {
    margin-top: 25px;
    .primary-btn {
      padding: 14.5px 30px;
      width: 100%;
    }
  }
}
.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close {
  color: $color-white;
  right: 0;
  text-align: center;
  padding: unset;
  width: 100%;
  height: 40px;
  width: 40px;
  opacity: 1;
  background: $color-primary;
}
.mfp-iframe-holder .mfp-close {
  top: -60px;
}
/* -----------------------------------------
  Member Details CSS
----------------------------------------- */
.member-details-section {
  .image {
    height: 100%;
    background: url(../img/team/team-img-3.jpg) no-repeat center;
    background-size: cover;
    @media screen and (min-width: 767px) {
      img {
        opacity: 0;
      }
    }
    @media screen and (max-width: 767px) {
      background: unset;
    }
  }
  .content {
    position: relative;
    padding: 40px 30px;
    background: $bg-secondary;
    &::after {
      position: absolute;
      content: "";
      top: 10px;
      right: 10px;
      border-top: 100px solid $color-primary;
      border-left: 100px solid transparent;
      -webkit-transition: $transition;
      transition: $transition;
      z-index: 1;
    }
    .member-info {
      h3 {
        font-size: 30px;
        line-height: 1;
        text-transform: capitalize;
        color: $color-secondary;
      }
      span {
        display: inline-block;
        color: $color-secondary;
        margin-bottom: 10px;
      }
    }
    .member-list {
      margin: 15px 0;
      .list-content {
        margin-bottom: 10px;
        i {
          margin-right: 8px;
          color: $color-primary;
          vertical-align: middle;
        }
        .title {
          color: $color-secondary;
          font-weight: 600;
        }
        .info {
          margin-left: auto;
        }
      }
    }
  }
}
.bio-area {
  .section-title {
    margin-bottom: 0;
    h2 {
      padding-left: 60px;
    }
    &::before {
      left: 0;
    }
  }
}

/* -----------------------------------------
  Service Details CSS
----------------------------------------- */
.service-details-area {
  padding-bottom: 60px;
  .image {
    margin-bottom: 40px;
  }
  .project-info {
    position: relative;
    padding: 30px 25px;
    background: $color-primary;
    text-align: center;
    margin-bottom: 40px;
    h3 {
      line-height: 1;
      margin-bottom: 15px;
      text-transform: capitalize;
      color: $color-white;
    }
    p {
      color: $color-white;
      line-height: 1.5;
      &:last-child {
        margin-bottom: 20px;
      }
    }
    .info-list {
      padding: 0;
      margin: 0;
      list-style-type: none;
      text-align: left;
      li {
        position: relative;
        padding: 12px 14px;
        background: $bg-secondary;
        margin-bottom: 16px;
        display: flex;
        i {
          vertical-align: -2px;
          margin-right: 8px;
          color: $color-secondary;
        }
        a {
          font-weight: 600;
          text-transform: capitalize;
          color: $color-secondary;
          display: inline-block;
          flex: 0 0 50%;
          max-width: 50%;
        }
        span {
          display: inline-block;
          flex: 0 0 50%;
          max-width: 50%;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  .content {
    margin-bottom: 40px;
    h2.title {
      font-size: 45px;
      line-height: 1.3;
      margin-top: -10px;
      color: $color-secondary;
      margin-bottom: 20px;
      text-transform: capitalize;
      span {
        color: $color-primary;
      }
    }
    p {
      color: $color-medium;
    }
  }
  .projects-area {
    .content {
      margin-bottom: 40px;
      h2 {
        margin-bottom: 25px;
        line-height: 1.3;
        margin-top: -10px;
        color: $color-secondary;
      }
    }
    .item-list {
      ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
        li {
          display: block;
          font-weight: 500;
          margin-bottom: 6px;
          padding-left: 25px;
          position: relative;
          line-height: 1.8;
          color: $color-medium;
          i {
            margin-left: -25px;
            margin-right: 5px;
            color: $color-primary;
            vertical-align: -2px;
          }
        }
      }
    }
  }
}

/* -----------------------------------------
  service Details CSS
----------------------------------------- */
.service-details-area {
  .service-details-desc {
    padding-left: 40px;
    margin-bottom: 30px;
    .image {
      margin-bottom: 25px;
    }
    .content {
      margin-bottom: 25px;
      h2 {
        font-size: 40px;
        line-height: 1.3;
        margin-top: -5px;
        color: $color-secondary;
        margin-bottom: 20px;
        text-transform: capitalize;
        span {
          color: $color-primary;
        }
      }
      p {
        color: $color-medium;
      }
    }

    .services-area {
      .content {
        h2 {
          margin-bottom: 25px;
          line-height: 1.3;
          color: $color-secondary;
        }
      }
      .item-list {
        margin-bottom: 25px;
        ul {
          padding: 0;
          margin: 0;
          list-style-type: none;
          li {
            display: block;
            font-weight: 500;
            margin-bottom: 6px;
            padding-left: 25px;
            position: relative;
            line-height: 1.8;
            color: $color-medium;
            i {
              margin-left: -25px;
              margin-right: 5px;
              color: $color-primary;
              vertical-align: -2px;
            }
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }

    .service-details-slider {
      margin-bottom: 25px;
      position: relative;
      .owl-nav {
        position: absolute;
        right: 20px;
        bottom: 20px;
      }
    }
  }

  .widget-area {
    margin-bottom: 30px;
    .widget {
      margin-bottom: 25px;
    }

    .nav-list {
      padding: 0;
      margin: 0;
      list-style-type: none;
      li {
        position: relative;
        padding: 14px 16px;
        background: $bg-secondary;
        margin-bottom: 15px;
        &:last-child {
          margin-bottom: 0;
        }
        a {
          font-weight: 600;
          text-transform: capitalize;
          color: $color-secondary;
        }
        i {
          float: right;
          margin-right: 8px;
          margin-top: 4px;
          color: $color-secondary;
          transform: rotateZ(-180deg);
        }
        &::after {
          content: "";
          position: absolute;
          top: 5px;
          height: calc(100% - 10px);
          left: 6px;
          width: 2px;
          background: $color-primary;
        }
      }
      li.active {
        background: $color-primary;
        &::after {
          background: $color-white;
        }
        i {
          transform: unset;
          color: $color-white;
        }
        a {
          color: $color-white;
        }
      }
    }

    .contact-form {
      position: relative;
      padding: 25px 25px;
      background: $bg-fff3cf;
      .primary-btn {
        width: 100%;
        color: $color-white;
        background: $color-secondary;
        &::before,
        &::after {
          background-color: $color-primary;
        }
        &:hover {
          color: $color-white;
        }
      }
    }

    .download-item {
      .download-item-single {
        display: flex;
        position: relative;
        padding: 25px 60px;
        margin-bottom: 25px;
        background: url(../img/item-bg-2.jpg) no-repeat center;
        background-size: cover;
        align-items: center;
        justify-content: center;
        &:first-child {
          background: url(../img/item-bg-1.jpg) no-repeat center;
          background-size: cover;
        }
        &:last-child {
          background: url(../img/item-bg-3.jpg) no-repeat center;
          background-size: cover;
        }
        &::after {
          position: absolute;
          content: "";
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 30, 76, 0.8);
        }

        i {
          width: 60px;
          height: 60px;
          line-height: 57px;
          background: $color-white;
          text-align: center;
          display: inline-block;
          z-index: 1;
          font-size: 28px;
        }
        .item-content {
          padding-left: 16px;
          z-index: 1;
          h4 {
            color: $color-white;
            margin-top: -5px;
            margin-bottom: 0;
          }
        }
      }
    }
  }

  h3.sub-title {
    line-height: 1;
    margin-bottom: 20px;
    text-transform: capitalize;
    color: $color-secondary;
  }
}
/* -----------------------------------------
  Terms CSS
----------------------------------------- */
.terms-area {
  @extend .service-details-area;
  .details-desc {
    padding-left: 40px;
    margin-bottom: 30px;
    .content {
      margin-bottom: 25px;
      h2 {
        font-size: 30px;
        line-height: 1.3;
        margin-top: -5px;
        color: $color-secondary;
        margin-bottom: 15px;
        text-transform: capitalize;
        span {
          color: $color-primary;
        }
      }
      p {
        color: $color-medium;
      }
    }

    .service-details-slider {
      margin-bottom: 25px;
      position: relative;
      .owl-nav {
        position: absolute;
        right: 20px;
        bottom: 20px;
      }
    }
    .content:last-child {
      margin-bottom: 0;
    }
  }
}
/* -----------------------------------------
  Terms CSS
----------------------------------------- */
.privacy-area {
  @extend .terms-area;
}
/* -----------------------------------------
  Error CSS
----------------------------------------- */
.error-area {
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/banner/banner-bg-2.jpg);
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 30, 76, 0.62);
  }
  .error-box {
    background: #ffffff;
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
    padding: 40px 20px 53px;
    border-radius: 5px;
    max-width: 760px;
    margin: auto;
    position: relative;
    &::after {
      position: absolute;
      content: "";
      top: 10px;
      left: 10px;
      border-top: 100px solid $color-primary;
      border-right: 100px solid transparent;
      transition: $transition;
    }

    .cta-btn {
      text-align: center;

      .primary-btn {
        padding: 15px 30px;
      }
    }
    .content {
      margin-bottom: 30px;
      text-align: center;
      .logo {
        margin-bottom: 20px;
      }
      h3 {
        font-size: 70px;
        margin-top: -7px;
        line-height: 1.3;
        margin-bottom: 0;
        color: $color-secondary;
      }
    }
  }
}
/* -----------------------------------------
  Pricing CSS
----------------------------------------- */
.pricing-section {
  .pricing-item-single {
    position: relative;
    background: $bg-secondary;
    border: 2px solid $color-primary;
    margin-bottom: 30px;

    .pricing-item-content {
      position: relative;
      text-align: center;
      text-transform: capitalize;
      background: url(../img/item-bg-2.jpg) no-repeat center;
      background-size: cover;
      z-index: 1;
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: rgba(0, 30, 76, 0.8);

        z-index: -1;
      }
      .content-text {
        padding: 35px 0;
        h2 {
          color: $color-primary;
          margin-bottom: 0;
        }

        p {
          color: $color-primary;
          font-size: 14px;
        }

        span.label {
          position: absolute;
          display: block;
          left: 10px;
          top: 10px;
          padding: 5px;
          font-weight: 500;
          text-align: left;
          color: $color-secondary;
          &::after {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            border-top: 120px solid $color-primary;
            border-right: 120px solid transparent;
            transition: $transition;
            z-index: -1;
          }
        }
      }
    }

    .pricing-item-list {
      text-align: center;
      padding: 25px 20px;
      ul {
        list-style-type: none;
        margin: 0;
        margin-bottom: 25px;
        text-align: left;
        padding: 0 20px;
        li {
          margin-bottom: 14px;
          font-size: 15px;
          color: $color-dark;
          font-weight: 500;
          i {
            font-size: 12px;
            font-weight: normal;
            margin-right: 10px;
            color: $color-primary;
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
        .disabled {
          opacity: 0.6;
        }
      }
    }
    .cta-btn {
      .primary-btn {
        width: 100%;
        color: $color-white;
        background: $color-secondary;
        &::before,
        &::after {
          background-color: $color-primary;
        }
        &:hover {
          color: $color-white;
        }
      }
    }
  }
  .pricing-item-single.active {
    .pricing-item-content {
      &::before {
        background: rgba(255, 188, 19, 0.8);
      }
      .content-text {
        padding: 50px 0;
        h2 {
          color: $color-white;
        }
        p {
          color: $color-white;
        }
        span.label {
          &::after {
            border-top: 120px solid $color-white;
          }
        }
      }
    }
    .cta-btn {
      .primary-btn {
        width: 100%;
        color: $color-dark;
        background: $color-primary;
        &::before,
        &::after {
          background-color: $color-primary;
        }
        &:hover {
          color: $color-white;
          &::before,
          &::after {
            background-color: $color-secondary;
          }
        }
      }
    }
  }
  .mt-30 {
    margin-top: 30px;
  }
}

.cost-section {
  .content-inner {
    padding-left: 60px;
    padding-right: 60px;
  }
  .section-title h2 {
    margin-top: -10px;
  }
  .cost-form {
    .form-group {
      margin-bottom: 20px;
      label {
        font-weight: 500;
        color: $color-secondary;
        margin-right: 8px;
      }
      .range-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        background: $color-primary;
        outline: none;
        height: 5px;
        border-radius: 30px;
      }
      .range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid $color-white;
        background: $color-primary;
        cursor: pointer;
      }

      .range-slider::-moz-range-thumb {
        position: relative;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid $color-white;
        background: $color-primary;
        cursor: pointer;
      }
      .slider-value {
        position: absolute;
        top: -20px;
        font-weight: 500;
        color: $color-secondary;
      }
      .input-btn {
        display: inline-block;
        text-align: center;
        background: $bg-secondary;
        color: $color-dark;
        border: 1px solid $color-primary;
        padding: 8px 12px;
        font-size: 14px;
        margin-right: 5px;
      }
      .input-btn.active {
        background: $color-primary;
      }
      .plus-minus-input {
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;
        .input-group-field {
          background: $bg-secondary;
          color: $color-dark;
          border: 1px solid $color-primary;
          padding: 8px 12px;
          width: 50px;
          text-align: center;
          &::-webkit-inner-spin-button,
          ::-webkit-outer-spin-button {
            appearance: none;
          }
        }
        .input-btn {
          margin: 0 8px;
          background: $color-primary;
        }
      }
      .form-control {
        height: unset;
      }
      .nice-select {
        float: unset;
        background: $bg-secondary;
        color: $color-dark;
        border: 1px solid $color-primary;
        padding-left: 10px;
        padding-right: 20px;
        margin-right: 8px;
        display: inline-flex;
        .list {
          background: $bg-secondary;
          color: $color-dark;
          border: 1px solid $color-primary;
          padding: 8px 12px;
          font-size: 14px;
          border-radius: 0;
          .option {
            transition: 0.6s;
            color: $color-light2;
            font-size: 14px;
            line-height: 25px;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 0;
            padding-right: 10px;
          }
          .option.selected {
            background-color: transparent;
            font-weight: 500;
            color: $color-medium;
          }
        }
        &::after {
          right: 5px;
          border: none;
          transform: rotate(0deg);
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 6px solid $color-primary;
        }
      }
      .open:after {
        border-top: none;
        border-bottom: 6px solid $color-primary;
      }
    }
    .cta-btn {
      margin-top: 30px;
      .submit-btn {
        width: 100%;
        text-align: center;
        display: inline-block;
        -webkit-transition: $transition;
        transition: $transition;
        border-radius: 0;
        border: none;
        padding: 15px 30px;
        z-index: 1;
        color: $color-dark;
        background-color: $color-primary;
        font-size: 30px;
        font-weight: 600;
        font-family: $font-family;
        line-height: 1.8;
        text-transform: capitalize;
        span {
          color: $color-white;
          font-size: 16px;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
    }
  }
}

/* -----------------------------------------
   Comingsoon CSS
----------------------------------------- */
.comingsoon-section {
  position: relative;
  height: 100vh;
  background: #a8aaf1;
  background: url(../img/bg-map-1.png) no-repeat center;
  background-size: cover;
  display: -ms-grid;
  display: grid;
  place-items: center;
  .comingsoon-box {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 45px 40px 35px;
    background-color: #fff;
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
    position: relative;
    &::after {
      position: absolute;
      content: "";
      top: -15px;
      left: -15px;
      border-top: 100px solid $color-primary;
      border-right: 100px solid transparent;
      -webkit-transition: $transition;
      transition: $transition;
      z-index: -1;
    }
    &::before {
      position: absolute;
      content: "";
      right: -15px;
      bottom: -15px;
      border-bottom: 100px solid $color-primary;
      border-left: 100px solid transparent;
      -webkit-transition: $transition;
      transition: $transition;
      z-index: -1;
    }

    .logo {
      img {
        margin: 0 auto 20px;
        display: block;
      }
    }

    .title-box {
      text-transform: capitalize;
      position: relative;
      text-align: center;
      h2 {
        color: $color-secondary;
      }

      .text {
        position: relative;
        margin-top: 12px;
      }
    }

    .newsletter-form {
      margin-bottom: 30px;

      .input-group {
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 20px rgba(106, 99, 119, 0.1);
        border: none;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid $color-primary;
      }
    }

    .cta-btn {
      text-align: center;

      .primary-btn {
        padding: 15px 30px;
      }
    }

    #timer {
      padding: 30px 0;

      div {
        color: $color-primary;
        width: 100px;
        height: 105px;
        border-radius: 5px;
        font-size: 40px;
        font-weight: 800;
        margin-left: 10px;
        margin-right: 10px;

        span {
          display: block;
          margin-top: -2px;
          font-size: 17px;
          font-weight: 600;
          color: $color-secondary;
        }
      }
    }
  }
}

/* -----------------------------------------
  Contact CSS
----------------------------------------- */
.contact-area {
  .contact-info {
    margin-bottom: 30px;
    .info-item {
      display: flex;
      position: relative;
      padding: 50px 16px;
      margin-bottom: 20px;
      background: url(../img/item-bg-2.jpg) no-repeat center;
      background-size: cover;
      align-items: center;
      justify-content: center;
      z-index: 1;
      &:first-child {
        background: url(../img/item-bg-1.jpg) no-repeat center;
        background-size: cover;
      }
      &:last-child {
        background: url(../img/item-bg-3.jpg) no-repeat center;
        background-size: cover;
      }
      &::after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 30, 76, 0.8);
        z-index: -1;
        transition: $transition;
      }
      i {
        color: $color-white;
        text-align: center;
        font-size: 40px;
        display: inline-block;
        margin-top: -2px;
      }
      .info-content {
        position: relative;
        padding-left: 20px;
        display: inline-block;
        p {
          text-transform: capitalize;
          color: $color-primary;
          line-height: 1.4;
          margin: 0;
        }
        a {
          font-weight: 500;
          font-size: 20px;
          color: $color-white;
        }
      }
      &:hover {
        &::after {
          background: rgba(255, 188, 19, 0.9);
        }
        i {
          color: $color-secondary;
        }
        .info-content {
          p {
            color: $color-white;
          }
          a {
            color: $color-secondary;
          }
        }
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  .contact-form {
    background: $bg-fff3cf;
    padding: 40px;
    margin-bottom: 30px;
    .content {
      margin-bottom: 30px;
      text-align: left;
      h3 {
        font-size: 30px;
        margin-top: -7px;
        margin-bottom: 0;
        color: $color-secondary;
      }
    }
    .form-group {
      margin-bottom: 25px;
    }
    .form-control {
      width: 100%;
      background: $color-white;
      border: none;
    }
    .cta-btn {
      margin-top: 25px;
      .primary-btn {
        width: 100%;
        padding: 14.5px 30px;
        color: $color-white;
        background: $color-secondary;
        &::before,
        &::after {
          background-color: $color-primary;
        }
        &:hover {
          color: $color-white;
        }
      }
    }
    .checkbox {
      label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 20px;
        font-weight: 500;
        font-size: 14px;
        display: inline-block;
        margin-bottom: 0;
        color: $color-dark;
        a {
          color: $color-primary;
        }
      }
      [type="checkbox"]:checked,
      [type="checkbox"]:not(:checked) {
        display: none;
      }
      [type="checkbox"]:checked + label:after,
      [type="checkbox"]:not(:checked) + label:after {
        content: "";
        width: 8px;
        height: 8px;
        background: $color-primary;
        position: absolute;
        top: 5.5px;
        left: 6px;
        transition: $transition;
      }
      [type="checkbox"]:checked + label::before,
      [type="checkbox"]:not(:checked) + label::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 19px;
        height: 19px;
        border: 1px solid $color-white;
        background: $color-white;
        transition: $transition;
      }
      [type="checkbox"]:checked + label::before {
        border: 1px solid $color-primary;
        background: unset;
      }
      [type="checkbox"]:not(:checked) + label:after {
        display: none;
      }
    }
  }
  .contact-map {
    overflow: hidden;
    padding-bottom: 50%;
    position: relative;
    height: 0;
    border: none;
    margin: 30px 0;
    iframe {
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      position: absolute;
      border: 0;
    }
  }
}
/* -----------------------------------------
  Pagination CSS
----------------------------------------- */
.pagination {
  display: block;
  margin-top: 35px;
  margin-left: auto;
  margin-right: auto;
  .page-numbers {
    width: 40px;
    height: 40px;
    background-color: $color-white;
    box-shadow: 0 0 30px -2px rgba(44, 44, 44, 0.1);
    color: $color-dark;
    text-align: center;
    display: inline-block;
    border-radius: 0;
    line-height: 42px;
    position: relative;
    margin-left: 3px;
    margin-right: 3px;
    font-weight: 500;
    font-size: 18px;
    &:hover {
      color: $color-white;
      background-color: $color-primary;
    }
    i {
      position: relative;
      top: 1.5px;
    }
  }
  .page-numbers.current {
    color: $color-white;
    background-color: $color-primary;
  }
}

/* -----------------------------------------
  Go Top CSS
----------------------------------------- */
.go-top {
  position: fixed;
  top: 50%;
  right: 3%;
  opacity: 0;
  cursor: pointer;
  text-decoration: none;
  color: $color-white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background: $color-primary;
  padding: 10px 20px;
  z-index: 100;
  transition: all 500ms ease-in-out;
}
.go-top.active {
  top: 95%;
  -webkit-transform: translateY(-95%);
  transform: translateY(-95%);
  opacity: 1;
  visibility: visible;
}

/* -----------------------------------------
  Preloader CSS
----------------------------------------- */
.preloader-main {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99999;
  background: $color-white;
  display: -ms-grid;
  display: grid;
  display: -ms-none;
  place-items: center;
  .loader {
    width: 175px;
    height: 80px;
    position: relative;

    &::before {
      content: "";
      left: 60px;
      bottom: 18px;
      position: absolute;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: $color-primary;
      background-image: radial-gradient(
          circle 8px at 18px 18px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 4px at 18px 0px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 4px at 0px 18px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 4px at 36px 18px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 4px at 18px 36px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 4px at 30px 5px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 4px at 30px 5px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 4px at 30px 30px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 4px at 5px 30px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(circle 4px at 5px 5px, $color-white 100%, transparent 0);
      background-repeat: no-repeat;
      animation: rotationBack 3s linear infinite;
    }
    &::after {
      content: "";
      left: 94px;
      bottom: 15px;
      position: absolute;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: $color-primary;
      background-image: radial-gradient(
          circle 5px at 12px 12px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 2.5px at 12px 0px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 2.5px at 0px 12px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 2.5px at 24px 12px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 2.5px at 12px 24px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 2.5px at 20px 3px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 2.5px at 20px 3px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 2.5px at 20px 20px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 2.5px at 3px 20px,
          $color-white 100%,
          transparent 0
        ),
        radial-gradient(
          circle 2.5px at 3px 3px,
          $color-white 100%,
          transparent 0
        );
      background-repeat: no-repeat;
      animation: rotationBack 4s linear infinite reverse;
    }
  }
  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
}

/* -----------------------------------------
  Footer CSS
----------------------------------------- */
.footer-area {
  background: url(../img/bg-map-1.png) no-repeat center;
  background-size: cover;
  .footer-widget {
    margin-bottom: 30px;
    .navbar-brand {
      .footer-logo2 {
        display: none;
      }
    }
  }
  ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    li {
      position: relative;
      margin-bottom: 15px;
    }
  }
  .navbar-brand {
    margin-bottom: 15px;
    padding: 0;
  }

  h5 {
    text-transform: capitalize;
    margin-bottom: 25px;
    margin-top: 13px;
  }

  .footer-links {
    li {
      transition: $transition;
      i {
        font-size: 12px;
        color: $color-primary;
      }
      &:hover {
        transform: translateX(5px);

        a {
          color: $color-primary;
        }

        &::before {
          color: $color-primary;
        }
      }
    }
  }
  .footer-news {
    .content {
      position: relative;
      display: flex;
      align-items: flex-end;
      .img {
        display: inline-table;
        margin-right: 10px;
        img {
          max-width: 41px;
        }
      }
    }
  }
  .contact-info {
    .content {
      position: relative;
      display: flex;
      .tag {
        display: inline-table;
        text-align: center;
        background: $color-primary;
        color: $color-dark;
        padding: 5px 12px;
        font-size: 16px;
        font-weight: 600;
        margin-right: 10px;
        margin-top: 5px;
      }
      span {
        &:last-child {
          display: block;
        }
        a {
          display: block;
        }
      }
    }
  }
}

/* -----------------------------------------
Copy Right CSS
----------------------------------------- */
.copy-right-area {
  background: $color-dark;
  padding: 1.9em 0;
  text-align: center;
  border-top: 1px solid rgba(25, 25, 25, 0.15);

  .copy-right-content {
    p {
      color: $color-white;
      margin-bottom: 0;
    }

    a {
      color: $color-primary;
    }
  }
}

.owl-carousel {
  .owl-nav {
    button[class*="owl-"] {
      width: 40px;
      height: 40px;
      background: $color-primary;
      margin-right: 7px;
      transition: $transition;
      color: $color-dark;
      text-align: center;
      font-size: 26px;
      border: none;
      line-height: 39px;
      i {
        line-height: 1.3;
      }
      &:last-child {
        margin-right: 0;
      }
      &:hover {
        background: $color-dark;
        color: $color-primary;
      }
    }
  }
}
.custom-owl-nav {
  button {
    width: 40px;
    height: 40px;
    background: $color-primary;
    margin-right: 7px;
    transition: $transition;
    color: $color-dark;
    text-align: center;
    font-size: 26px;
    border: none;
    line-height: 39px;
    &:last-child {
      margin-right: 0;
    }
    &:hover {
      background: $color-dark;
      color: $color-primary;
    }
    i {
      line-height: 1.3;
    }
  }
}

@-webkit-keyframes ripple {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.75);
    transform: scale(1.75);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes ripple {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.75);
    transform: scale(1.75);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .preloader-main {
    display: none !important;
  }
}

/*----- Buy Now Btn CSS -----*/
.buy-now-btn {
  img {
    top: 50%;
    left: 20px;
    width: 15px;
    position: absolute;
    transform: translateY(-50%);
  }
  right: 20px;
  z-index: 99;
  top: 50%;
  position: fixed;
  transform: translateY(-50%);
  border-radius: 30px;
  display: inline-block;
  color: #ffffff;
  background-color: #82b440;
  padding: 10px 20px 10px 42px;
  box-shadow: 0 1px 20px 1px #82b440;
  font-size: 13px;
  font-weight: 600;
  &:hover {
    color: #ffffff;
    background-color: #94be5d;
  }
}