@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;
    }
  }
}

.cms-content {
  p {
    font-size: 14.5px;
    color: $gray-600;
    line-height: rem(25);
    margin-bottom: rem(30);
  }
  b,
  strong {
    font-weight: 500;
  }
  ul {
    color: $primary;
    margin-bottom: rem(30);
    html[dir="ltr"] & {
      padding-left: 18px;
    }
    html[dir="rtl"] & {
      padding-right: 18px;
    }
    li {
      p {
        margin-bottom: rem(10);
      }
    }
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

.plus-more {
  border: 1px solid rgba($primary, 0.15);
  color: $primary;
  padding: 0px 2px;
  box-shadow: 1px 1px 2px rgba($primary, 0.2);
  background-color: rgba($primary, 0.1);
  border-radius: 4px;
}

.intl-tel-input {
  width: 100%;
}

.radius{
  border-radius: 5px;
}
.border-less{
 padding: 0px 7px;
}
.vws {
 padding: 3px 7px;
    font-size: 16px !important;
    background: transparent;
}
.border-primary{
  border: 1px solid $primary;
}
.color-primary{
  color: $primary;
}


.edit-contents{
  border: 2px solid $primary;
  border-radius: 5px;
  padding: 15px;
}
.edit-contents{
  position: relative;
  margin-bottom: 20px;
}
.edit-tools{
     position: absolute;
    top: -16px;
    background-color: #0083e2;
    color: #fff;
    border-radius: 2px;
    right: 15px;

}
.edit-tools {
  ul li{
    padding: 5px 7px;
  }
}
.icon-call-to-action{
  font-size: 26px !important;
}

.edit-items{
  color: $gray-900;
  border: 1px solid $gray-200;
    transition: all .2s linear;
}

.main-form{
  width: 100%;
 padding: 5px 10px;
     border: 1px solid #d4d4d4;
}

.custom-file-label{
padding: 5px 10px !important;
       border: 1px solid #d4d4d4;
       height: 35px !important;
       border-radius: 0px !important;
}
.custom-file{
  height: 35px !important;
}
.custom-file-input{
   height: 35px !important;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "Choose File";
}
.custom-file-label::after{
  height: 33px !important;
      padding: 7px 15px !important;
      border-radius: 0px !important;
      background-color: $gray-100 !important;
}


.edit-body .tab-content::-webkit-scrollbar-track {
  padding: 2px 0;
}
.edit-body .tab-content::-webkit-scrollbar {
  width: 8px;
}
.edit-body .tab-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #bebebe;
}


.banner-slider {
.carousel-control-prev-icon, .carousel-control-next-icon {
       display: inline-block;
    background-size: 45% 50% !important;
    width: 40px;
    height: 40px;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
  }
.banner-image {
    width: 100%;
    min-height: 470px;
    max-height: 470px;
    object-fit: cover;

    
}

}








.testimonial-slide{

.slick-center{
       position: relative;
       z-index: 9;
}
.slick-track{
  padding-bottom: 35px;
}
.testimonials{
    border-radius: 5px;
    position: relative;
       background-color: #ececec;
    border: 5px solid #fff;

}
.slick-arrow{
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
.slick-list {
 
}
.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%;
}
.nav-tabs{
   border: none !important;
   position: relative;
}

.section-tabs{
  .nav-tabs > .col{
    text-align: center !important;
    position: relative;
        background-color: #f0f0f0;
    margin-right: 3px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
        padding: 0px;
        a{
          display: block;
        }
  }
   .nav-tabs > .col > .active{
        padding: 5px;
    border-top: 1px solid #0083e2;
    border-left: 1px solid #0083e2;
    border-right: 1px solid #0083e2;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #fff !important;

   }

 .cont-sect-minus{
   position: absolute;
    right: 5px;
    color: red;
    font-size: 18px;
    font-weight: 600;
    padding: 5px;
    top: 3px;
 }  
 .tab-content{
    overflow-y: auto !important;
        margin-right: 3px;
    .active{
    padding: 10px;
    border-left: 1px solid #0083e2;
    border-bottom: 1px solid #0083e2;
    border-right: 1px solid #0083e2;
    border-top: 1px solid #0083e2;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    }
 }
}
.added-components-dynamic{
      padding: 25px 0 !important;
}


.container-inner-section
  {
  
    border: 7px solid #FFF;
   background: #d8d8d8; 
   height: auto;
   min-height:100px;
  } 

  .container-inner-height {
    margin: 0 0px !important;
  }

  #manage-content{
    margin: 0px 15px;
  }




.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;
}

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

.icon-facebook{
   font-size: 35px;
}
.icon-twitter{
  font-size: 35px;
}
.icon-pinterest{
  font-size: 35px;
}
.icon-youtube{
  font-size: 35px;
}



.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;


  }
}

.btn{
  border: 1px solid $theme-one-second-bg !important;
}