.about {
  position: relative;
  z-index: 1;
  .about-bg {
    position: absolute;
    top: 10%;
    left: -53px;
    z-index: -1;
  }
  .about-bg-1 {
    position: absolute;
    right: 56%;
    top: 37%;
  }
}
.choose-us-section {
  background-color: variables.$light-400;
  position: relative;
  z-index: 1;
  .choose-title {
    margin-bottom: 40px;
  }
  .choose-card {
    .choose-icon {
      span {
        width: 64px;
        height: 64px;
        background-color: variables.$dark;
        padding: 20px;
      }
    }
  }
  .choose-bg-01 {
    position: absolute;
    left: 0;
    top: 66%;
    z-index: -1;
    @include mixins.respond-below(md) {
      display: none;
    }
  }
  .choose-bg-02 {
    position: absolute;
    right: 0;
    top: 9%;
    z-index: -1;
    @include mixins.respond-below(md) {
      display: none;
    }
  }
}
.team-section {
  position: relative;
  z-index: 1;
  .about-content {
    margin-bottom: 40px;
  }
  .about-btn {
    .btn {
      margin-right: 40px;
    }
  }
  .about-bg {
    img {
      position: absolute;
      &.about-bg-02 {
        bottom: 10%;
        left: 0;
        z-index: -1;
        width: 100%;
      }
    }
  }
  .header-section {
    margin-bottom: 40px;
  }
  .team-item {
    position: relative;
    margin-bottom: 40px;
    @include mixins.respond-below(xl) {
      margin-bottom: 0;
    }
    .card{
      box-shadow: variables.$box-shadow-md;
        .team-overlay {
          position: absolute;
          bottom: -22px;
          left: 50%;
          width: 80%;
          margin: auto;
          transform: translateX(-50%);
          border-radius: 38px;
          box-shadow: variables.$box-shadow-sm;
          z-index: 1;
          @include mixins.respond-below(xl) {
            bottom: 30px;
          }
        }
      
    }
   
  }
  .about-bg {
    bottom: 10%;
    left: 0;
    z-index: -1;
    width: 100%;
    position: absolute;
  }
}
.user-section {
  position: relative;
  .testimonial-bg {
    position: absolute;
    top: 6%;
    right: 5%;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 5s;
    -moz-transition-duration: 5s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 9s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: grow;
    -moz-animation-duration: 9s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
  }
}
.blog-details {
  .blog-image {
    position: relative;
    display: block;
    z-index: 1;
    &::before {
      content: "";
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #141414 105.28%);
      left: 0;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      @include mixins.rounded(10px);
      z-index: 2;
    }
  }
  .blog-user-image {
    img {
      width: 108px;
      height: 108px;
    }
  }
}
.blog-search {
  .search-content {
    padding: 20px;
    background-color: variables.$light-100;
    border-radius: 5px;
    border: 1px solid variables.$light;
    .search-feild {
      display: flex;
      align-items: center;
      border-radius: 5px;
      border: 1px solid variables.$light;
      background-color: variables.$white;
      span {
        padding-left: 16px;
      }
      .form-control {
        border: 0;
      }
    }
  }
}
.related-post {
  padding: 15px;
  border-radius: 5px;
  border: 1px solid variables.$light;
}
.poplur-tag {
  background-color: variables.$light-500;
  padding: 8px 16px;
  border-radius: 10px;
}
.gallery-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  .img-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    flex: 1 1 120px;
    img {
      width: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
    .img-overlay-1 {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(variables.$black, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      opacity: 0;
      visibility: hidden;
      transform: scale(1.2);
      @include mixins.transition(all 0.5s ease);
      a {
        font-size: variables.$font-size-14;
        color: variables.$white;
      }
      .gallery-eye-icon {
        padding: 18px;
        width: 60px;
        height: 60px;
      }
    }
    &:hover,
    &:focus,
    &:active,
    .active {
      .img-overlay-1 {
        opacity: 1;
        visibility: visible;
        @include mixins.transform(scale(1));
        border-radius: 10px;
      }
    }
    .active {
      .img-overlay-1 {
        opacity: 1;
        visibility: visible;
        @include mixins.transform(scale(1));
      }
    }
  }
}
.faq {
  .accordion-item {
    padding: 20px;
    border-radius: 10px;
    border: 1px dashed variables.$light;
  }
  .accordion-header {
    .accordion-button:not(.collapsed) {
      color: variables.$primary;
      &::after {
        padding: 10px;
        border: 1px solid variables.$primary;
        background-color: variables.$primary-transparent;
        color: variables.$primary;
        font-size: 12px;
      }
    }
    .accordion-button::after {
      padding: 10px;
      border: 1px solid variables.$secondary;
      color: variables.$secondary;
      font-size: 12px;
    }
  }
}
.pricing-header {
  span {
    padding: 6px;
    border: 1px solid variables.$pink;
    font-size: 10px;
    color: variables.$pink;
  }
}
.pricing-list-items {
  p {
    margin-bottom: 8px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.pricing-plan-tab {
  .nav {
    margin-bottom: 40px;
    .tab-btn {
      padding: 10px;
      background-color: variables.$light-100;
      border: 1px solid variables.$light;
      border-radius: 60px;
      .nav-link{
        font-weight: 500;
        font-size: 16px;
        border-radius: 40px;
        &.active{
          color: variables.$white;
          background-color: variables.$primary;
          border-radius: 40px;
          font-weight: 500;
        font-size: 16px;
        }
      }
    }
  }
}
.que-sec {
  margin-top: 40px;
  @include mixins.respond-below(lg) {
    margin-top: 20px;
  }
}






/*============================
  5.background
============================*/


.bg-primary {
    background-color: variables.$primary !important;
}
.bg-secondary {
    background-color: variables.$secondary !important;
}
.bg-info {
    background-color: variables.$info !important;
}
.bg-success {
    background-color: variables.$success !important;
}
.bg-warning {
    background-color: variables.$warning !important;
}
.bg-danger {
    background-color: variables.$danger !important;
}
.bg-dark {
    background-color: variables.$dark !important;
}
.bg-light {
    background-color: variables.$light !important;
}
.bg-white {
    background-color: variables.$white;
}
.bg-pink {
    background-color: variables.$pink !important;
}
.bg-indigo {
    background-color: variables.$indigo !important;
}
.bg-pink-100 {
    background-color: variables.$pink-100 !important;
}
.bg-purple {
    background-color: variables.$purple !important;
}
.bg-purple-100 {
    background-color: variables.$purple-100 !important;
}
.bg-gray {
    background: variables.$light-500;
}
.bg-primary {
    background-color: variables.$primary !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$primary,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$primary,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$primary,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$primary,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$primary,1) !important;
    }
}
.bg-secondary {
    background-color: variables.$secondary !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$secondary,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$secondary,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$secondary,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$secondary,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$secondary,1) !important;
    }
}
.bg-info {
    background-color: variables.$info !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$info,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$info,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$info,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$info,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$info,1) !important;
    }
}
.bg-success {
    background-color: variables.$success !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$success,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$success,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$success,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$success,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$success,1) !important;
    }
}
.bg-warning {
    background-color: variables.$warning !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$warning,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$warning,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$warning,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$warning,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$warning,1) !important;
    }
}
.bg-danger {
    background-color: variables.$danger !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$danger,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$danger,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$danger,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$danger,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$danger,1) !important;
    }
}
.bg-dark {
    background-color: variables.$dark !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$dark,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$dark,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$dark,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$dark,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$dark,1) !important;
    }
}
.bg-light {
    background-color: variables.$light !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$light,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$light,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$light,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$light,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$light,1) !important;
    }
}
.bg-cyan {
    background-color: variables.$cyan !important;
}
@each $color,
$value in variables.$theme-colors {
    .bg-#{$color} {
        background-color: #{$value} !important;
        border: 1px solid #{$value} !important;
        color: variables.$white;
    }
}
.bg-soft-primary {
    background-color: variables.$primary-100;
    color: variables.$primary;
}
.bg-soft-secondary {
    background-color: variables.$secondary-300;
    color: variables.$secondary;
}
.bg-soft-success {
    background-color: variables.$success-300;
    color: variables.$success;
}
.bg-soft-danger {
    background-color: variables.$danger-300;
    color: variables.$danger;
}
.bg-soft-warning {
    background-color: variables.$warning-300;
    color: variables.$warning;
}
.bg-soft-info {
    background-color: rgba(variables.$info, 0.3);
    color: variables.$info;
}
.bg-soft-light {
    background-color: rgba(variables.$light, 0.9);
    color: variables.$text-color;
}
.bg-soft-dark {
    background-color: rgba(variables.$dark, 0.3);
    color: variables.$white;
}
.bg-light {
  color: variables.$text-color;
}

.bg-primary-gradient {
  background: variables.$primary-gradient !important;
  color: variables.$white;
}
.bg-secondary-gradient {
  background: variables.$secondary-gradient !important;
  color: variables.$white;
}
.bg-warning-gradient {
  background: variables.$warning-gradient !important;
  color: variables.$white;
}
.bg-info-gradient {
  background: variables.$info-gradient !important;
  color: variables.$white;
}
.bg-success-gradient {
  background: variables.$success-gradient !important;
  color: variables.$white;
}
.bg-danger-gradient {
  background: variables.$danger-gradient !important;
  color: variables.$white;
}
.bg-purple-gradient {
  background: variables.$purple-gradient !important;
  color: variables.$white;
}
.bg-teal-gradient {
  background: variables.$teal-gradient !important;
  color: variables.$white;
}
.bg-light-gradient {
  background: variables.$light-gradient !important;
  color: variables.$black;
}
.bg-dark-gradient {
  background: variables.$dark-gradient !important;
  color: variables.$white;
}
.bg-outline-primary {
  background-color: variables.$white;
  border: 1px solid variables.$primary;
  color: variables.$primary;
}
.bg-outline-secondary {
  background-color: variables.$white;
  border: 1px solid variables.$secondary;
  color: variables.$secondary;
}
.bg-outline-warning {
  background-color: variables.$white;
  border: 1px solid variables.$warning;
  color: variables.$warning;
}
.bg-outline-info {
  background-color: variables.$white;
  border: 1px solid variables.$info;
  color: variables.$info;
}
.bg-outline-success {
  background-color: variables.$white;
  border: 1px solid variables.$success;
  color: variables.$success;
}
.bg-outline-danger {
  background-color: variables.$white;
  border: 1px solid variables.$danger;
  color: variables.$danger;
}
.bg-outline-dark {
  background-color: variables.$white;
  border: 1px solid variables.$dark;
  color: variables.$dark;
}
.bg-outline-light {
  background-color: variables.$white;
  border: 1px solid variables.$light !important;
  color: variables.$black !important;
}
.bg-primary-transparent {
    background-color: variables.$primary-transparent !important;
    color: variables.$primary !important;
    &:hover {
        background-color: variables.$primary-transparent !important;
        color: variables.$primary !important;
    }
}
.bg-secondary-transparent {
    background-color: variables.$secondary-transparent !important;
}
.bg-info-transparent {
    background-color: variables.$info-100 !important;
    color: variables.$info !important;
    &:hover {
        background-color: variables.$info-100 !important;
        color: variables.$info !important;
    }
}
.bg-success-transparent {
    background-color: variables.$success-100 !important;
    color: variables.$success !important;
    &:hover {
        background-color: variables.$success-100 !important;
        color: variables.$success !important;
    }
}
.bg-warning-transparent {
    background-color: variables.$warning-100 !important;
    color: variables.$warning !important;
    &:hover {
        background-color: variables.$warning-100 !important;
        color: variables.$warning !important;
    }
}
.bg-danger-transparent {
    background-color: variables.$danger-100 !important;
    color: variables.$danger !important;
    &:hover {
        background-color: variables.$danger-100 !important;
        color: variables.$danger !important;
    }
}
.bg-light-transparent {
    background-color: rgba(variables.$light, 0.5) !important;
    color: variables.$light !important;
    &:hover {
        background-color: rgba(variables.$light, 0.5) !important;
        color: variables.$text-color !important;
    }
}
.bg-cyan-transparent {
    background-color: variables.$cyan-100 !important;
    color: variables.$cyan !important;
    &:hover {
        background-color: variables.$cyan-100 !important;
        color: variables.$cyan !important;
    }
}
.bg-purple-transparent {
    background-color: variables.$purple-transparent !important;
}
.bg-teal-transparent {
    background-color: variables.$teal-transparent !important;
}
.bg-gray-transparent {
    background-color: variables.$gray-transparent !important;
}
.bg-danger-100 {
    background-color: variables.$danger-100 !important;
}
.bg-gray-100 {
    background-color: variables.$gray-100; 
}
.bg-gray-200 {
    background-color: variables.$gray-200;
}
.bg-gray-300 {
    background-color: variables.$gray-300;
}
.bg-gray-400 {
    background-color: variables.$gray-400;
}
.bg-gray-500 {
    background-color: variables.$gray-500;
}
.bg-gray-600 {
    background-color: variables.$gray-600;
}
.bg-gray-700 {
    background-color: variables.$gray-700;
}
.bg-gray-800 {
    background-color: variables.$gray-800;
}
.bg-gray-900 {
    background-color: variables.$gray-900;
}
.bg-light-100 {
    background-color: variables.$light-100 !important;
}
.bg-light-300 {
    background-color: variables.$light-300 !important;
}
.bg-light-400 {
    background-color: variables.$light-400 !important;
}
.bg-light-500 {
    background-color: variables.$light-500 !important;
}
.bg-success-100 {
    background-color: variables.$success-100 !important;
}
.bg-success-800 {
    background-color: variables.$success-800 !important;
}
.bg-orange {
    background-color: variables.$orange !important;
}
.bg-orange-100 {
    background-color: variables.$orange-100 !important;
}
.bg-teal {
    background-color: variables.$teal !important;
}
.bg-teal-100 {
    background-color: variables.$teal-100 !important;
}
.bg-secondary-100 {
    background-color: variables.$secondary-100 !important;
}
.svg-primary {
    fill: variables.$primary;
}
.svg-secondary {
    fill: variables.$secondary;
}
.svg-success {
    fill: variables.$success;
}
.svg-danger {
    fill: variables.$danger;
}
.svg-warning {
    fill: variables.$warning;
}
.svg-white {
    fill: variables.$white;
}
.svg-black {
    fill: variables.$black;
}
.svg-pink {
    fill: variables.$pink;
}
.svg-purple {
    fill: variables.$purple;
}
.svg-info {
    fill: variables.$info;
}
.svg-light {
  fill: variables.$light;
}
.svg-dark {
  fill: variables.$dark;
}
.svg-default {
  fill: variables.$text-color;
}
.color-container {
  width: 5rem;
  height: 5rem;
  border-radius: variables.$border-radius;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 3rem;
}
.text-container {
  padding: 0.25rem 0.5rem;
  border-radius: variables.$border-radius;
  box-shadow: variables.$box-shadow;
}
.color-box {
    width: 80px;
    height: 80px;
    border-radius: variables.$border-radius;
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
}
.badge-soft-cyan {
    background: variables.$cyan-100;
    color: variables.$cyan;
}
.bg-cyan {
    background: variables.$cyan;
    color: variables.$white;
}
.bg-cyan-100 {
    background: variables.$cyan-100 !important;
}
.bg-light-200 {
    background: variables.$light-200 !important;
}
.bg-light-300 {
    background: variables.$light-300;
}
.bg-primary-gradient {    
    background: variables.$primary-gradient;
}
.bg-transparent-primary {
    background: variables.$primary-transparent;
}
.bg-transparent-dark {
    background: variables.$dark-transparent;
}
.bg-transparent-info {
    background: variables.$info-transparent;
}
.bg-transparent-cyan {
    background: variables.$cyan-100;
}
.bg-transparent-warning {
    background: variables.$warning-100;
}
.bg-transparent-light {
    background: variables.$light;
}
.bg-transparent-danger {
    background: variables.$danger-100;
}
.bg-transparent-success {
    background: variables.$success-100;
}
.bg-transparent-info {
    background: variables.$info-100;
}
.bg-light-gray {
    background: variables.$light-500;
}
.bg-light-orange {
    background: variables.$primary-200;
    span {
        background: variables.$primary-200;
    }
}
.bg-light-red {
    background: variables.$danger-200;
    span {
        background: variables.$danger-200;
    }
}
.bg-light-green {
    background: variables.$success-300;
    span {
        background: variables.$success-300;
    }
}