/******************************************************************
Template Name: Dreams
Description: Dreams wedding template
Author: Colorib
Author URI: https://colorlib.com/
Version: 1.0
Created: Colorib
******************************************************************/
/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Services Section
6.  Counter Section
7.  Team Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/
html,
body {
  height: 100%;
  font-family: 'Josefin Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: #111111;
  font-weight: 400;
  font-family: 'Play', sans-serif;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  font-size: 16px;
  font-family: 'Josefin Sans', sans-serif;
  color: #adadad;
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 15px 0;
}

img {
  max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  color: #fff;
}

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

/*---------------------
  Helper CSS
-----------------------*/
.section-title {
  margin-bottom: 50px;

  &.center-title {
    text-align: center;

    h2 {

      &:after {
        right: 0;
        margin: 0 auto;
      }
    }
  }

  span {
    color: $white-color;
    display: block;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  h2 {
    color: $white-color;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 25px;

    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 5px;
      width: 70px;
      background: $primary-color;
      content: "";
    }
  }
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.spad {
  padding-top: 100px;
  padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #fff;
}

/* buttons */
.primary-btn {
  display: inline-block;
  font-size: 15px;
  font-family: 'Play', sans-serif;
  font-weight: 700;
  padding: 14px 32px 12px;
  color: $white-color;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;

  &:hover {

    &:before {
      height: 100%;
      width: 100%;
    }

    &:after {
      height: 100%;
      width: 100%;
    }
  }

  &:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 30px;
    width: 30px;
    border-left: 2px solid $primary-color;
    border-top: 2px solid $primary-color;
    content: "";
    z-index: -1;
    @include transition(all, .7s);
  }

  &:after {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 30px;
    width: 30px;
    border-right: 2px solid $primary-color;
    border-bottom: 2px solid $primary-color;
    content: "";
    z-index: -1;
    @include transition(all, .7s);
  }
}

.site-btn {
  font-size: 15px;
  color: $white-color;
  background: $primary-color;
  font-family: 'Play', sans-serif;
  font-weight: 700;
  border: none;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 14px 34px 12px;
  width: 100%;
}

/* Preloder */
#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #000;
}

.loader {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 60px;
  animation: loader 0.8s linear infinite;
  -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }

  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }

  100% {
    -webkit-transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}