// color
$darksColor: #2f3640;
$greyColor: #95a5a6;
$whiteColor: #fff;
$orangeColor: #ff9f43;
$orangeSecondaryColor: #F8EFBA;

// font Weight
$fontWSM: 400;
$fontWMD: 600;
$fontWXL: 900;

p,
body {
  font: {
    size: 16px;
    weight: $fontWSM;
  }
}

p {
  margin: 0 0 37px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font: {
    weight: $fontWXL;
  }
  line-height: 1em;
  margin: 0 0 15px;
}

// Main Width
$small: 200px;
$medium: 810px;
.container {
  width: 1250px;
  margin: 0 auto;
  @media only screen and (min-width: $small) and (max-width: $medium) {
    width: 96%;
  }
}

//Title
.title {
  color: $whiteColor;
  font: {
    size: 40px;
    weight: $fontWXL;
  }
  h2 {
    margin-bottom: 7px;
    margin-left: 10px;
  }
  @media only screen and (min-width: $small) and (max-width: $medium) {
    padding-top: 25px;
    font-size: 25px;
  }
}

//Sub Title
.sub_title {
  color: $whiteColor;
  h3 {
    margin-left: 10px;
  }
  font: {
    size: 22px;
    weight: $fontWMD;
  }
  @media only screen and (min-width: $small) and (max-width: $medium) {
    font-size: 16px;
    font-weight: $fontWMD;
  }
}

//Padding
.paddingXL {
  padding: 60px 0;
  @media only screen and (min-width: $small) and (max-width: $medium) {
    padding: 25px 0;
  }
}

//margin
.m-top {
  margin-top: 40px;
}

//Call to action Button
.btn_cta {
  background: #ff4d4d;
  padding: 15px 35px;
  color: #fff;
  font-weight: 500;
  margin-top: 10px;
  border-radius: 5px;
  transition: 0.5s;
  font: {
    size: 20px;
    weight: $fontWMD;
  }
  &:hover {
    background: #ffb8b8;
  }
}