@import "custom-variables/variables";
@import "_bootstrap";
@import "common/header";
@import "common/footer";
@import "plugins/font-face";
@import "plugins/icomoon";
@import "plugins/slick";

html {
  font-size: 100%;
  @include media-breakpoint-down(md) {
    font-size: 87.5% !important;
  }
  @include media-breakpoint-down(sm) {
    font-size: 81.3% !important;
  }
}

body {
 background: #fff;
  font-family: $font-family-sans-serif;
}

.font-primary {
  font-family: $font-family-sans-serif;
}

.font-secondary {
  font-family: $font-family-secondary;
}

p,
.font-normal {
  font-size: rem(16);
}

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

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

.font-large {
  font-size: rem(18);
}

.font-weight-semibold {
  font-weight: $font-weight-semibold;
}

@mixin text-grey {
  @each $name, $color in $grays {
    .text-gray-#{$name} {
      color: $color !important;
    }
    .bg-gray-#{$name} {
      background: $color !important;
    }
  }
}

@include text-grey;

.text-white-50 {
  color: rgba($white, 0.5);
}

.text-black-50 {
  color: rgba($black, 0.5);
}

.text-underline {
  text-decoration: underline;
}

.btn-white {
  background-color: $white;
  border-color: $white;
}

.border-width-2 {
  border-width: 2px;
}
// ::-webkit-input-placeholder {
//   /* Chrome/Opera/Safari */
//   color: $gray-500;
// }
// ::-moz-placeholder {
//   /* Firefox 19+ */
//   color: $gray-500;
// }
// :-ms-input-placeholder {
//   /* IE 10+ */
//   color: $gray-500;
// }
// :-moz-placeholder {
//   /* Firefox 18- */
//   color: $gray-500;
// }

select {
  background: url(../images/dropdown-icon.png) no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: auto !important;
  html[dir="ltr"] & {
    background-position: 97% center;
    padding-right: 30px !important;
  }
  html[dir="rtl"] & {
    background-position: 3% center;
    padding-left: 30px !important;
  }
}

.overflow {
  &-hidden {
    overflow: hidden;
  }
  &-y-hidden {
    overflow-y: hidden;
  }
  &-x-hidden {
    overflow-x: hidden;
  }
}

.gutter {
  &-6 {
    margin-left: -6px !important;
    margin-right: -6px !important;
    & > [class^="col"] {
      padding-left: 6px !important;
      padding-right: 6px !important;
    }
  }
}

.shadow {
  box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.15) !important;
  &-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  }
  &-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
  }
}

.list-style-pipe {
  li {
    font-size: 14px;
    &:after {
      content: "|";
      padding: 0 8px;
    }
    a {
      color: $gray-400;
      font-weight: 500;
    }
    &:last-child {
      &:after {
        display: none;
      }
    }
  }
}

.img-cover {
  object-fit: cover;
}

[class^="hover-bg"] {
  transition: background-color 0.3s ease;
}
[class^="hover-clr"] {
  transition: color 0.3s ease;
}
.hover-bg {
  &,
  &-primary {
    &:hover {
      background-color: $primary;
    }
  }
  &,
  &-secondary {
    &:hover {
      background-color: $secondary;
    }
  }
  &-white {
    &:hover {
      background-color: $white;
    }
  }
}
.hover-clr {
  @at-root {
    &,
    &-primary,
    a#{&}-primary {
      &:hover {
        color: $primary !important;
        * {
          color: $primary !important;
        }
      }
    }
    &,
    &-secondary,
    a#{&}-secondary {
      &:hover {
        color: $secondary !important;
        * {
          color: $secondary !important;
        }
      }
    }
    &-white,
    a#{&}-white {
      &:hover {
        color: $white !important;
        * {
          color: $white !important;
        }
      }
    }
  }
}

.show {
  display: block;
}

.hide {
  display: none;
}

.cursor-pointer {
  cursor: pointer;
}

.slider-arrow-center {
  .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    font-family: "icomoon" !important;
    font-size: 0px;
    background: $white;
    box-shadow: 0 0 2px rgba($black, 0.5);
    border: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
    &:hover {
      box-shadow: 0 0 6px rgba($black, 0.3);
    }
    &:focus {
      outline: 0;
    }
    &.slick-prev {
      &:before {
        content: "\e90b";
        font-size: 14px;
      }
    }
    &.slick-next {
      right: 0;
      &:before {
        content: "\e909";
        font-size: 14px;
      }
    }
  }
}

.slick-dots {
  li {
    button {
      cursor: pointer;
    }
  }
}

/****************************************


theme styles


*********************************************/

.testimonial-slide{

.slick-center{
  background-color: $theme-one-bg;
  color: white;
   margin-top: -60px;
       position: relative;
       z-index: 9;
}
.slick-track{
  padding-top: 60px;
  padding-bottom: 35px;
}
.testimonials{
 box-shadow: 0 10px 40px 10px rgba(140, 152, 164, 0.175) !important;
    border-radius: 5px;
    position: relative;
}
.slick-arrow{
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
.slick-list {
  padding-bottom: 60px !important;
}
.testi-btn-left{

}
.blog-btn-right{
  position: absolute;
    bottom: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    background-color: #fff;
     border: 1px solid $theme-one-second-bg;      
     margin-left: 10
}
.blog-btn-left{
   position: absolute;
    bottom: 5px;
       width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;;
    background-color: #fff;
        margin-left: -55px;
            z-index: 99;
    border: 1px solid $theme-one-second-bg;        
}
.slick-dots{
  .slick-active button{
  background-color: $theme-one-bg !important;
  }
  button{
    background-color: #ddd;
  }
}
}
.profile-img img{
  width: 75px;
  height: 75px;
      object-fit: cover;
    border-radius: 50%;
}
.testi-details{
      position: absolute;
    left: 0;
    right: 0;
    margin-top: 10px;

}
.qout{
  font-size: 45px;
  color: #f0f0f0;
}

.email-sub{
  width: 600px;
  max-width: 100%;
  position: relative;
      margin: 0 auto;
}
.email-sub-text{
  width: 100%;
    padding: 15px 30px;
    border-radius: 30px;
    border: 1px solid $theme-one-bg;
        padding-right: 190px !important;
}
.email-sub-btn{
         position: absolute;
    right: 0;
    display: block;
    top: 0;
    background-color: $theme-one-bg;
    border: none;
    box-shadow: none;
    color: #fff;
    padding: 11px 40px;
    margin: 5px;
    border-radius: 30px;
}
.icon-facebook{
   font-size: 35px;
}
.icon-twitter{
  font-size: 35px;
}
.icon-pinterest{
  font-size: 35px;
}
.icon-youtube{
  font-size: 35px;
}

.nav-tabs {
    border-bottom: 1px solid transparent !important;
}

.horizontal-tab > .nav-tabs > a{
  padding: 10px;
}





.form-listing-bck{
  padding: 15px;
  .textbox , input , textarea {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #cdcdcd;
    margin-bottom: 15px;
  }
  ul{
    padding: 0 !important;
    list-style: none;
  }
  .element-three {
    display: none;
  }
  .listbox{
    width: 100%;
    padding: 7px 15px;
     border: 1px solid #cdcdcd;
       margin-bottom: 15px;
  }
  button{
    width: auto;
  }
  .custom-button01{
    width: auto;
    padding: 10px 50px;
    border: 1px solid $theme-one-second-bg !important;
  min-width: 125px;
  background-color: transparent !important;
  color: #626262;

  &:hover{
    background-color: $theme-one-second-bg !important;
    color: #fff;
    transition: all .5s  ease-in-out;
  }


  }
}
.btn{
  border: 1px solid $theme-one-second-bg !important;
  min-width: 125px;
  color: #626262;
   transition: all .5s ease-in-out;
  &:hover{
    background-color: $theme-one-second-bg !important;
    transition: all .5s  ease-in-out;
  }
}

.horizontal-tab {
  margin-top: 30px;
  margin-bottom: 30px;

    .tab-content{
   padding: 15px;
    margin: 7px;
   background: #f0f0f0;
  }
}
.horizontal-tab .col{
  padding: 0;

  a{
    padding: 10px;
    display: block;
     font-size: 18px;
     text-align: center;
         border-radius: 5px;
    margin: 7px;
    border: 1px solid #f0f0f0;
  }
  a.active{
   color: #fff;
    background-color: $theme-one-bg;
    border: none !important;
  }


}


.blog-section{
  margin-bottom: 30px;
  margin-top: 30px;
}
.blg-area{
  padding-bottom: 30px;
}


.blog-im{
 height: 190px;
 object-fit: cover;
 width: 100%;
}





.blog-slide{


.slick-arrow{
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
.slick-list {
  padding-bottom: 60px !important;
}
.testi-btn-left{

}
.blog-btn-right{
  position: absolute;
    bottom: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    background-color: #fff;
     border: 1px solid $theme-one-second-bg;      
     margin-left: 10
}
.blog-btn-left{
   position: absolute;
    bottom: 5px;
       width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;;
    background-color: #fff;
        margin-left: -55px;
            z-index: 99;
    border: 1px solid $theme-one-second-bg;        
}
.slick-dots{
  .slick-active button{
  background-color: $theme-one-bg !important;
  }
  button{
    background-color: #ddd;
  }
}
}


.banner .banner-image {
    width: 100%;
    min-height: 580px;
    max-height: 580px;
    object-fit: cover;
}
.image-group-slide{
  margin-top: 30px;
  margin-bottom: 30px;
}