/*
-----------------------------------------------------
Project Name:   Pabble - Multipurpose HTML Template
Version:        1.0
Type:           HTML Template
Author:         aruphash
Primary use:    Multipurpose HTML Websites
-----------------------------------------------------
*/


/* Google Fonts */


/*
 * font-family: 'Poppins', sans-serif;
 * font-family: 'Roboto', sans-serif;
 */


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600%7CRoboto:400,500&display=swap');

/*------------------------------------------------------------------------
[Table of Contents]

01. PRE SETUP
02. GENERAL STYLE
03. HEADER
04. NAVIGATION
05. MAIN SLIDER
06. ABOUT
07. SERVICES
08. COUNTER
09. PORTFOLIO
10. TEAM MEMBER
11. PRICING TABLE
12. TESTIMONIALS
13. CALL TO ACTION
14. BLOG
15. CLIENTS SLIDER
16. CONTACT
17. OTHER PAGES
  17.1. ABOUT PAGE
  17.2. BLOG PAGE
  17.3. 404 PAGE
  17.4. SINGLE BLOG PAGE
  17.5. SINGLE SERVICES PAGE
18. FOOTER
19. MEDIA QUERIES

/*----------------------------------------------------------------------------

[Typography]

Body:   font-size: 16px, font-family: 'Roboto', sans-serif;
Heading:  font-family: 'Poppins', sans-serif;
Paragraph:  font-size: 16px, font-family: 'Roboto', sans-serif;

-------------------------------------------------------------------------------*/

/*=========================
    01. PRE SETUP
===========================*/

/*------------------------------------------------------------------------------
# [Color Codes]
--------------------------------------------------------------------------------*/

$primary-color: #13aff0;
$secondary-color: #2b3948;
$white-color: #fff;

$light-white-color: #fafafa;
$background-light: #f8f9fa;
$subtitle-color: #f0f0f0;
$border-color: #dee0e0;
$dark-color: #2b3948;
$para-color: #626262;
$overlay-color: $primary-color;

$font-size: 16px;
$line-height: 1.5;

$theme-padding: $font-size*$line-height*3;
$inner-section-padding: $font-size*$line-height*2;
$inner-padding: 30px;
$smaller-padding: 6px;

@mixin transition( $property ) {
    -webkit-transition: $property;
    -ms-transition: $property;
    transition: $property;
}

@mixin transform( $property ) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}

@mixin gradient( $direction, $start-color, $start-per, $end-color, $end-per ) {
  background: $start-color;
  background: -webkit-linear-gradient($direction, $start-color $start-per, $end-color  $end-per);
  background: -moz-linear-gradient($direction, $start-color $start-per, $end-color  $end-per);
  background: -o-linear-gradient($direction, $start-color $start-per, $end-color  $end-per);
  background: linear-gradient($direction, $start-color $start-per, $end-color  $end-per);
}

/* Typography */
html {
  overflow-x: hidden;
}

body {
  background-color:$light-white-color;
}

body,
form,
ul,
ol {
    margin: 0;
    padding: 0;
}

.container {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @extend .pre-font-family-2;
}

body,
span {
  @extend .pre-font-family-1;
  color: $para-color;
}

/* Basics */
a,
a:active,
a:hover,
a:focus {
  text-decoration: none;
}

a {
  color: $primary-color;
  @include transition( all .2s ease-in-out );

  &:hover,
  &:focus,
  &:active {
    color: darken( $primary-color, 15% );
  }
}

 /* Pre Setup */
.pre-font-family-1 {
    font-family: 'Roboto', sans-serif;
}

.pre-font-family-2 {
    font-family: 'Poppins', sans-serif;
}

.pre-shadow {
   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.fa {
  -webkit-text-stroke: 0;
}

.vertical-center {
    display: flex;
    align-items: center;
}

.horizontal-center {
  display: flex;
  justify-content: center;
}

.image-container img {
    max-width: 100%;
    height:auto;
    display: block;
}

.fa-gradient {
  &::before{
    @include gradient(45deg, $primary-color, 0%, $secondary-color, 70%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.text-gradient {
  @include gradient(45deg, $primary-color, 0%, $secondary-color, 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.theme-padding {
  padding-top: $theme-padding;
  padding-bottom: $theme-padding;
}

.inner-section {
  margin-bottom: $inner-section-padding;
}

.text-center {
  text-align: center;
}

.form-input,
input,
textarea,
select {
    width: 100%;
    height: auto;
    color: $dark-color;
    padding: 10px;
    border: 1px solid $border-color;
    border-radius: 3px;
}

input[type="button"],
input[type="submit"],
input[type="search"],
button {
  border-radius: 0;
}


$typo-p-padding: 11px;


::-webkit-input-placeholder {
  font-size: 14px;
}

::-moz-placeholder {
  font-size: 14px;
}

:-ms-input-placeholder {
  font-size: 14px;
}

::placeholder {
  font-size: 14px;
}