//
// helper.scss
//

// color
@each $color,
$value in $theme-colors {
  .text-#{$color} {
    color: $value !important;
  }

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

.section {
  padding-top: 120px;
  padding-bottom: 120px;
  position: relative !important;
}

.para-p {
  max-width: 650px;
}

/*** ani-bg ***/

@keyframes ani-bg {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(200px);
  }
}

.box-shadow {
  box-shadow: $box-shadow;
}

hr {
  border-top: 1px solid $muted;
  margin: 0;
}

.lh-1 {
  letter-spacing: 1px;
}

// font-size

.f-12 {
  font-size: 12px;
}

.f-14 {
  font-size: 14px;
}

.f-16 {
  font-size: 16px;
}

.f-18 {
  font-size: 18px;
}

.f-19 {
  font-size: 19px;
}

.f-20 {
  font-size: 20px;
}

.f-21 {
  font-size: 21px;
}

.f-22 {
  font-size: 22px;
}

.f-23 {
  font-size: 23px;
}

.f-24 {
  font-size: 23px;
}

.f-30 {
  font-size: 30px;
}

.f-36 {
  font-size: 36px;
}


// avatar

.avatar-xs {
  height: 2rem;
  width: 2rem;
}

.avatar-sm {
  height: 3rem;
  width: 3rem;
}

.avatar-md {
  height: 3.5rem;
  width: 3.5rem;
}

.avatar-lg {
  height: 4.5rem;
  width: 4.5rem;
}

.avatar-xl {
  height: 6rem;
  width: 6rem;
}

.avatar-xxl {
  height: 8rem;
  width: 8rem;
}

// font-weight

.font-weight-500 {
  font-weight: 500;
}

.font-weight-600 {
  font-weight: 600;
}


.border-radius {
  border-radius: 6px !important;
}

//heading border
.title-border {
  width: 90px;
  height: 1px;
  background: linear-gradient(to right, transparent, $primary, transparent);
  margin: 0 auto;
}

.breadcrumb{
  box-shadow: $box-shadow;
  width: fit-content;
  background-color: $white;
  padding: 16px 20px;
  border-radius: 60px;
}   

//hero heading And sub-title animation
.hero-sub {
  animation-name: moveInleft;
  animation-duration: 3s;
}

.hero-heading {
  animation-name: moveInRight;
  animation-duration: 3s;
}

@keyframes moveInleft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

//top scroll-top
#scroll-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  cursor: pointer;
  background: transparent;
  border-radius: 50%;
  // border-color: $border-color;
  padding: 0px 5px;
  color: $gray-500;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px !important;
  }
}

.table-nowrap {
  th,
  td {
      white-space: nowrap;
  }
}


//////////  


.bg-overlay {
  background-color: rgba(74 74 74 / 70%);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}


.align-items-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.btn-rounded {
  border-radius: 5px;
}

.btn {
  padding: 11px 28px;
  font-size: 13px;
  letter-spacing: 0.9px;
  font-weight: 600;
  text-transform: uppercase;
}

.btn-sm {
  padding: 10px 22px;
}

.title-heading {
  font-weight: 700;
}

.btn-lg {
  padding: 14px 60px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.5s;
  border: 1px solid #20ad96;
  overflow: hidden;
  position: relative;
}

// inner page animation

@keyframes moveInbottom {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

.heading-bottom-icon{
  i{
   animation: moveInbottom 2s;
  }
}

.inner-heading{
  h1{
    animation: moveInRight 2s;
  }
  p{
    animation: moveInleft 2s;
  }
}

// home heading animation

@keyframes moveInhome {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

.home-heading{
  h1{
    animation: moveInhome 2s;
  }
  h2, h6{
    animation: moveInhome 2s;
  }
}

@media (max-width:992px) {
  .section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
