/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/

/* 1. Theme default css */
@font-face {
  font-family: 'cerebri_sansbold';
  src: url('../fonts/cerebrisans-bold-webfont.woff2') format('woff2'),
  url('../fonts/cerebrisans-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cerebri_sansmedium';
  src: url('../fonts/cerebrisans-medium-webfont.woff2') format('woff2'),
  url('../fonts/cerebrisans-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cerebri_sansregular';
  src: url('../fonts/cerebrisans-regular-webfont.woff2') format('woff2'),
  url('../fonts/cerebrisans-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cerebri_sanssemibold';
  src: url('../fonts/cerebrisans-semibold-webfont.woff2') format('woff2'),
  url('../fonts/cerebrisans-semibold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'system-ui';
  font-style: normal;
  color: $body-color;
}

.img, img {
  @include transition(.3s);
}

.f-left {
  float: left
}

.f-right {
  float: right
}

.fix {
  overflow: hidden
}

a,
.button, button {
  @include transition(.3s);
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: medium none;
}

button:focus, input:focus, input:focus, textarea, textarea:focus {
  outline: 0
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $c_bold;
  color: $heading-color;
  margin-top: 0px;
  font-style: normal;
  text-transform: normal;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-size: 40px;
  font-weight: 500;
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

ul {
  margin: 0px;
  padding: 0px;
}

li {
  list-style: none
}

p {
  font-size: 15px;
  font-weight: normal;
  line-height: 28px;
  color: $body-color;
  margin-bottom: 15px;
}

hr {
  border-bottom: 1px solid $hr-border-color;
  border-top: 0 none;
  margin: 30px 0;
  padding: 0;
}

label {
  color: $black-soft;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}

*::-moz-selection {
  background: $black;
  color: $white;
  text-shadow: none;
}

::-moz-selection {
  background: $black;
  color: $white;
  text-shadow: none;
}

::selection {
  background: $black;
  color: $white;
  text-shadow: none;
}

/*--
    - Input Placeholder
-----------------------------------------*/
*::-moz-placeholder {
  color: $black;
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: $black;
  font-size: 14px;
  opacity: 1;
}


/*--
    - Common Classes
-----------------------------------------*/
.fix {
  overflow: hidden
}

.clear {
  clear: both;
}


/*--
    - Background color
-----------------------------------------*/

.faben-blue-bg {
  background: $faben-blue;
}

.grey-bg {
  background: $grey;
}

.grey-bg-2 {
  background: $grey-2;
}

.white-bg {
  background: $white;
}

.black-bg {
  background: $black;
}

.theme-bg {
  background: $theme-color;
}

.theme-bg {
  background: $theme-color;
}

.footer-bg {
  background: $footer-bg;
}


/*--
    - color
-----------------------------------------*/
.white-color {
  color: $white;
}

.black-color {
  color: $black;
}

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

// .primary-color {
// 	color: #222;
// }

/*--
    - Margin & Padding
-----------------------------------------*/
/*-- Margin Top --*/
@for $i from 1 through 40 {
  .mt-#{5 * $i} {
    margin-top: 5px * $i;
  }
}

/*-- Margin Bottom --*/
@for $i from 1 through 60 {
  .mb-#{5 * $i} {
    margin-bottom: 5px *$i;
  }
}

/*-- Margin Left --*/
@for $i from 1 through 40 {
  .ml-#{5 * $i} {
    margin-left: 5px * $i;
  }
}

/*-- Margin Right --*/
@for $i from 1 through 40 {
  .mr-#{5 * $i} {
    margin-right: 5px *$i;
  }
}

/*-- Padding Top --*/
@for $i from 1 through 60 {
  .pt-#{5 * $i} {
    padding-top: 5px *$i;
  }
}

/*-- Padding Bottom --*/
@for $i from 1 through 60 {
  .pb-#{5 * $i} {
    padding-bottom: 5px *$i;
  }
}

/*-- Padding Left --*/
@for $i from 1 through 40 {
  .pl-#{5 * $i} {
    padding-left: 5px *$i;
  }
}

/*-- Padding Right --*/
@for $i from 1 through 40 {
  .pr-#{5 * $i} {
    padding-right: 5px *$i;
  }
}


// others common css here :)

/* scrollUp */
#scrollUp {
  background: $theme-color;
  height: 35px;
  width: 35px;
  right: 50px;
  bottom: 77px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  border-radius: 50%;
  font-size: 20px;
  line-height: 32px;
}

#scrollUp:hover {
  background: #333;
}

/* bounce-animate */
.bounce-animate {
  animation-name: float-bob;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

@-webkit-keyframes float-bob {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes float-bob {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.rotateme {
  -webkit-animation-name: rotateme;
  animation-name: rotateme;
  -webkit-animation-duration: 10s;
  animation-duration: 60s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

.owl-nav > div span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 70px;
  display: inline-block;
  background: #f6f2ed;
  line-height: 65px;
  text-align: center;
  border-radius: 50%;
}

.owl-nav > div span > img {
  min-width: 10px;
}

.owl-next > span {
  right: -35px;
}

.owl-prev > span {
  left: -35px;
}

.owl-nav > div span > img {
  max-width: 25px;
}

.testimonial-active button.slick-arrow {
  opacity: 1;
  visibility: visible;
  position: absolute;
  top: auto;
  bottom: 0;
  transform: translateY(100px);
  background: #f6f2ed;
  transition: .4s;
  z-index: 9;
}

.testimonial-active button.slick-arrow.slick-prev {
  left: 0;
}

.testimonial-active button.slick-arrow.slick-next {
  left: 85px;
}

.testimonial-active button.slick-arrow:hover, .testimonial-active button.slick-arrow:focus {
  background: #0963AD;
  color: #fff;
  transition: .4s;
}


//responsive style after update
.z-index {
  position: relative;
  z-index: 2;
}

.slider-video {
  @media #{$laptop}{
    text-align: center !important;
  }
}

.banner-widget img {
  width: 100%;
}

.project-wrapper:hover .project-text {
  opacity: 1;
}

.text-large {
  font-size: 1.2rem !important;
}

.text-large-1 {
  font-size: 1rem !important;
}