/*!
Theme Name: Roofsie
Theme URI: http://bracketweb.com/roofsiewp
Author: Layerdrops
Author URI: https://themeforest.net/user/layerdrops
Description: Roofsie is the perfect WordPress Theme for your roofing business. It has a very modern and creative look. We designed this template, especially for metal roofing, industrial roofing, construction, roof installation, maintenance, renovation, repair service, roof repair, roofers, roofing services, and roofing companies related to any business website.
Version: 1.1
Tested up to: 5.8
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: roofsie
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

roofsie is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments
# Templates
	- Common
	- Navigations One
	- Navigations Two
	- Animations
	- Zoom Fade Css
	- Mobile Nav
	- Search Popup
	- Banner One
	- Main Slider Two
	- Welcome One
	- Counter One
	- We Change
	- We Make
	- Services One
	- Portfolio One
	- Brand One
	- Testimonials Two
	- Two Boxes
	- Video One
	- Reasons One
	- Blog One
	- CTA One
	- Site Footer
	- Areas Of Practice
	- Build Business
	- Web Solutions
	- Team One
	- Watch Video
	- Core Features
	- Blog Two
	- Google Map
	- Get In Touch
	- CTA Two
	- Portfolio Two
	- Page Header
	- Service Details
	- Blog Sidebar
	- Sidebar
	- Blog Details
		- Comments
	- Portfolio Page
	- Portfolio Details
	- Similar Work
	- Portfolio Details Full
	- Reasons
	- Error Page
	- Contact Page
	- Contact Page Google Map
--------------------------------------------------------------*/
:root {
  --roofsie-font: "Manrope", sans-serif;
  --roofsie-reey-font: "reeyregular";
  --roofsie-gray: #6c6b6f;
  --roofsie-gray-rgb: 108, 107, 111;
  --roofsie-white: #ffffff;
  --roofsie-white-rgb: 255, 255, 255;
  --roofsie-primary: #f4f1ee;
  --roofsie-primary-rgb: 244, 241, 238;
  --roofsie-black: #1c1b1f;
  --roofsie-black-rgb: 28, 27, 31;
  --roofsie-base: #ff4f47;
  --roofsie-base-rgb: 255, 79, 71;
  --roofsie-extra: #f6f6f6;
  --roofsie-extra-rgb: 246, 246, 246;
  --roofsie-bdr-color: #e3e3e3;
  --roofsie-bdr-color-rgb: 227, 227, 227;
  --roofsie-bdr-radius: 5px;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Typography
--------------------------------------------- */
body,
button {
  color: var(--roofsie-gray, #6c6b6f);
  font-family: var(--roofsie-font, "Manrope", sans-serif);
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3 {
  clear: both;
  font-weight: 500;
}

p {
  margin-bottom: 1.5em;
}


i {
  font-style: italic;
}


var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

mark {
  background: var(--roofsie-bdr-color, #e3e3e3);
  text-decoration: none;
}

b,
strong {
  color: var(--roofsie-black);
}

/* Elements
--------------------------------------------- */
body {
  background: #fff;
}

hr {
  background-color: var(--roofsie-bdr-color, #e3e3e3);
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 0.5em 3em;
  padding-left: 1em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

/* Make sure embeds and iframes fit their containers. */

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

/* Links
--------------------------------------------- */
a {
  color: var(--roofsie-black);
}
a:hover, a:focus, a:active {
  color: var(--roofsie-base);
}
a:focus {
  outline: none;
}
a:hover, a:active {
  outline: none;
}

/* Forms
--------------------------------------------- */
button {
  border: 1px solid;
  border-color: var(--roofsie-bdr-color, #e3e3e3) var(--roofsie-bdr-color, #e3e3e3) var(--roofsie-bdr-color, #e3e3e3);
  background: var(--roofsie-bdr-color, #e3e3e3);
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}
button:hover {
  border-color: var(--roofsie-bdr-color, #e3e3e3) var(--roofsie-bdr-color, #e3e3e3) var(--roofsie-bdr-color, #e3e3e3);
}
button:active, button:focus {
  border-color: var(--roofsie-bdr-color, #e3e3e3) var(--roofsie-bdr-color, #e3e3e3) var(--roofsie-bdr-color, #e3e3e3);
}

/* clears the ‘X’ from Internet Explorer */

/* clears the ‘X’ from Chrome */

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Navigation
--------------------------------------------- */

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}


.page {
  margin: 0 0 0em;
}

/* Comments
--------------------------------------------- */

/* Widgets
--------------------------------------------- */

/* Media
--------------------------------------------- */

/* Make sure logo link wraps around logo image. */

/* Captions
--------------------------------------------- */

/* Galleries
--------------------------------------------- */

/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */

/* Do not show the outline on the skip link target. */

/* Alignments
--------------------------------------------- */

/* Custom Animations
--------------------------------------------- */

/***
=============================================
    circle Css
=============================================
***/
/***
=============================================
    Zoom Fade Css
=============================================
***/
/***
=============================================
    Zoom In Out Css
=============================================
***/
/***
=============================================
    Animation1 Css
=============================================
***/
/***
=============================================
    Animation2 Css
=============================================
***/
/***
=============================================
    Float Bob Y Animation Css
=============================================
***/

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
/*--------------------------------------------------------------
#     Zoom Fade Css
--------------------------------------------------------------*/
/* custom animations */
/** squares **/
/* Templates
--------------------------------------------- */
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Utility
# Cards
# Common
# Form
# Navigations
# Animations
# Mobile Nav
# Search Popup
# Page Header
# Google Map
# Client Carousel
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Common
--------------------------------------------------------------*/
:root {
  --roofsie-font: "Manrope", sans-serif;
  --roofsie-reey-font: "reeyregular";
  --roofsie-gray: #6c6b6f;
  --roofsie-gray-rgb: 108, 107, 111;
  --roofsie-white: #ffffff;
  --roofsie-white-rgb: 255, 255, 255;
  --roofsie-base: #ff4f47;
  --roofsie-base-rgb: 255, 79, 71;
  --roofsie-black: #1c1b1f;
  --roofsie-black-rgb: 28, 27, 31;
  --roofsie-primary: #f4f1ee;
  --roofsie-primary-rgb: 244, 241, 238;
  --roofsie-bdr-radius: 5px;
}

.row {
  --bs-gutter-x: 30px;
}

body {
  font-family: var(--roofsie-font);
  color: var(--roofsie-gray);
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
}

body.locked {
  overflow: hidden;
}

a {
  color: var(--roofsie-gray);
}

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

::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
}

::-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

h1,
h2,
h3 {
  color: var(--roofsie-black, #1c1b1f);
  margin: 0;
  font-weight: 800;
}

p {
  margin: 0;
}


ol,
ul {
  margin-top: 0;
  margin-bottom: 0;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
}

::-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

.page-wrapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  min-width: 300px;
  overflow: hidden;
}

.container {
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}
::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
}

::-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

/*--------------------------------------------------------------
# Custom Cursor
--------------------------------------------------------------*/

.thm-btn {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  -webkit-appearance: none;
  outline: none !important;
  background-color: var(--roofsie-base, #ff4f47);
  color: var(--roofsie-white);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 5px;
  padding: 15px 40px 15px;
  transition: all 0.5s linear;
  overflow: hidden;
  z-index: 1;
}

.thm-btn i {
  position: relative;
  display: inline-block;
  height: 13px;
  width: 13px;
  background-color: var(--roofsie-white);
  border-radius: 50%;
  color: var(--roofsie-base, #ff4f47);
  font-size: 7px;
  line-height: 13px;
  text-align: center;
  top: -2px;
  margin-right: 4px;
  padding-left: 2px;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.thm-btn:before {
  transition-duration: 800ms;
  position: absolute;
  width: 200%;
  height: 200%;
  content: "";
  top: 110%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: -1;
  background-color: var(--roofsie-black, #1c1b1f);
}

.thm-btn:hover {
  color: var(--roofsie-white);
}

.thm-btn:hover:before {
  top: -40%;
}

.section-title {
  position: relative;
  display: block;
  margin-top: -7px;
  margin-bottom: 49px;
}

.section-sub-title-box {
  position: relative;
  display: inline-block;
  margin-left: 40px;
}

.section-sub-title {
  font-size: 16px;
  color: var(--roofsie-base, #ff4f47);
  font-weight: 700;
  line-height: 26px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.section-title-shape-1 {
  position: absolute;
  top: -4px;
  left: -40px;
}

.section-title-shape-1 img {
  width: auto;
}

.section-title__title {
  margin: 0;
  color: var(--roofsie-black, #1c1b1f);
  font-size: 48px;
  line-height: 58px;
  font-weight: 800;
}

/* scroll to top */

/*--------------------------------------------------------------
# Navigations One
--------------------------------------------------------------*/
.main-header {
  position: relative;
  display: block;
  width: 100%;
  background: transparent;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  z-index: 99;
  position: relative;
}

.main-header__logo {
  position: absolute;
  top: 0;
  left: 60px;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-top: 25px;
  width: 175px;
  height: 160px;
}
.main-header__logo__shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--roofsie-primary);
  width: 100%;
  height: 94px;
  z-index: 2;
}
.main-header__logo__shape-1::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  width: 100%;
  height: 63px;
  background-color: var(--roofsie-primary);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.main-header__logo__shape-2 {
  position: absolute;
  top: 53px;
  left: 10px;
  background-color: var(--roofsie-base);
  width: calc(100% - 20px);
  height: 57px;
  z-index: 1;
}
.main-header__logo__shape-2::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  width: 100%;
  height: 56px;
  background-color: var(--roofsie-base);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.main-header__logo a > img {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  z-index: 3;
}

.main-header__top {
  position: relative;
  display: block;
  background-color: var(--roofsie-black, #1c1b1f);
  padding-left: 375px;
  padding-right: 60px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.main-header__top-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-header__top-address {
  position: relative;
  display: block;
}

.main-header__top-address-list {
  position: relative;
  display: flex;
  align-items: center;
}

.main-header__top-address-list li {
  position: relative;
  display: flex;
  align-items: center;
}

.main-header__top-address-list li + li {
  margin-left: 35px;
}

.main-header__top-address-list li .icon {
  position: relative;
  display: flex;
  align-items: center;
  position: relative;
  top: 2px;
}

.main-header__top-address-list li .icon span {
  font-size: 15px;
  color: var(--roofsie-base, #ff4f47);
}

.main-header__top-address-list li .text {
  margin-left: 10px;
}

.main-header__top-address-list li .text p {
  font-size: 14px;
  color: #86838c;
  font-weight: 400;
  line-height: 15px;
}

.main-header__top-address-list li .text p a {
  color: #86838c;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.main-header__top-address-list li .text p a:hover {
  color: var(--roofsie-base, #ff4f47);
}

.main-header__top-right {
  position: relative;
  display: flex;
  align-items: center;
}

.main-header__top-menu-box {
  position: relative;
  display: block;
}

.main-header__top-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.main-header__top-menu li {
  position: relative;
  display: flex;
  align-items: center;
}

.main-header__top-menu li + li {
  margin-left: 30px;
}

.main-header__top-menu li:before {
  position: absolute;
  top: 10px;
  bottom: 8px;
  right: -14px;
  content: "";
  width: 1px;
  background-color: #86838c;
  transform: rotate(15deg);
}

.main-header__top-menu li:last-child:before {
  display: none;
}

.main-header__top-menu li a {
  font-size: 14px;
  color: #86838c;
  font-weight: 400;
  display: flex;
  align-items: center;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.main-header__top-menu li a:hover {
  color: var(--roofsie-base, #ff4f47);
}

.main-menu {
  position: relative;
  display: block;
}

.main-menu__wrapper {
  position: relative;
  display: block;
}

.main-menu__wrapper-inner {
  display: block;
  padding-left: 375px;
  padding-right: 60px;
}

.main-menu__left {
  display: block;
  float: left;
}

.main-menu__main-menu-box {
  display: block;
}

.main-menu__right {
  position: relative;
  display: flex;
  float: right;
  align-items: center;
  padding: 20px 0;
}

.main-menu__call {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 60px;
  padding: 5px 0;
}

.main-menu__call-icon {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--roofsie-base, #ff4f47);
  background-color: var(--roofsie-primary);
  font-size: 20px;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.main-menu__call-icon:hover {
  background-color: var(--roofsie-base, #ff4f47);
  color: var(--roofsie-white);
}

.main-menu__call-content {
  position: relative;
  margin-left: 10px;
  top: 2px;
}

.main-menu__call-content a {
  font-size: 16px;
  font-weight: 700;
  color: var(--roofsie-black, #1c1b1f);
  display: inline-block;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.main-menu__call-content a:hover {
  color: var(--roofsie-base, #ff4f47);
}

.main-menu__call-content p {
  font-size: 13px;
  line-height: 13px;
}

.main-menu__btn-box {
  position: relative;
  display: block;
  margin-left: 30px;
}

.stricky-header .main-menu__wrapper-inner {
  padding-left: 60px;
}

.main-menu .main-menu__list,
.main-menu .main-menu__list > li > ul,
.main-menu .main-menu__list > li > ul > li > ul,
.stricky-header .main-menu__list,
.stricky-header .main-menu__list > li > ul,
.stricky-header .main-menu__list > li > ul > li > ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: none;
}

@media (min-width: 1200px) {
  .main-menu .main-menu__list,
  .main-menu .main-menu__list > li > ul,
  .main-menu .main-menu__list > li > ul > li > ul,
  .stricky-header .main-menu__list,
  .stricky-header .main-menu__list > li > ul,
  .stricky-header .main-menu__list > li > ul > li > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.main-menu .main-menu__list > li,
.stricky-header .main-menu__list > li {
  padding-top: 35px;
  padding-bottom: 35px;
  position: relative;
}

.main-menu .main-menu__list > li + li,
.stricky-header .main-menu__list > li + li {
  margin-left: 60px;
}

.main-menu .main-menu__list > li > a,
.stricky-header .main-menu__list > li > a {
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--roofsie-black, #1c1b1f);
  position: relative;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  font-weight: 600;
}

.main-menu .main-menu__list > li.current > a,
.main-menu .main-menu__list > li:hover > a,
.stricky-header .main-menu__list > li.current > a,
.stricky-header .main-menu__list > li:hover > a {
  color: var(--roofsie-base, #ff4f47);
}

.main-menu .main-menu__list > li > ul,
.main-menu .main-menu__list > li > ul > li > ul,
.stricky-header .main-menu__list > li > ul,
.stricky-header .main-menu__list > li > ul > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 270px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  opacity: 0;
  visibility: hidden;
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-transform: scaleY(0) translateZ(100px);
  transform: scaleY(0) translateZ(100px);
  -webkit-transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease;
  transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease;
  transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease;
  transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
  z-index: 99;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 10px 39.2px 0.8px rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 10px;
  padding: 31px 0px 31px;
  border-bottom-right-radius: 10px;
}

.main-menu .main-menu__list > li > ul > li > ul > li > ul,
.stricky-header .main-menu__list > li > ul > li > ul > li > ul {
  display: none;
}

.main-menu .main-menu__list > li:hover > ul,
.main-menu .main-menu__list > li > ul > li:hover > ul,
.stricky-header .main-menu__list > li:hover > ul,
.stricky-header .main-menu__list > li > ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scaleY(1) translateZ(0px);
  transform: scaleY(1) translateZ(0px);
}

.main-menu .main-menu__list > li > ul > li,
.main-menu .main-menu__list > li > ul > li > ul > li,
.stricky-header .main-menu__list > li > ul > li,
.stricky-header .main-menu__list > li > ul > li > ul > li {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  width: 100%;
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

.main-menu .main-menu__list > li > ul > li + li,
.main-menu .main-menu__list > li > ul > li > ul > li + li,
.stricky-header .main-menu__list > li > ul > li + li,
.stricky-header .main-menu__list > li > ul > li > ul > li + li {
  border-top: none;
  margin-top: 10px;
}

.main-menu .main-menu__list > li > ul > li > a,
.main-menu .main-menu__list > li > ul > li > ul > li > a,
.stricky-header .main-menu__list > li > ul > li > a,
.stricky-header .main-menu__list > li > ul > li > ul > li > a {
  position: relative;
  font-size: 16px;
  line-height: 30px;
  color: var(--roofsie-gray);
  letter-spacing: 0;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 4px 20px 3px;
  -webkit-transition: 500ms;
  transition: 500ms;
  background-color: var(--roofsie-white);
  border-radius: var(--roofsie-bdr-radius);
}

.main-menu .main-menu__list > li > ul > li:hover > a,
.main-menu .main-menu__list > li > ul > li > ul > li:hover > a,
.stricky-header .main-menu__list > li > ul > li:hover > a,
.stricky-header .main-menu__list > li > ul > li > ul > li:hover > a {
  background-color: var(--roofsie-primary);
  color: var(--roofsie-black, #1c1b1f);
}

.main-menu .main-menu__list > li > ul > li > ul,
.stricky-header .main-menu__list > li > ul > li > ul {
  top: 0;
  left: 100%;
  border-top-left-radius: var(--roofsie-bdr-radius);
  border-top-right-radius: var(--roofsie-bdr-radius);
}

.stricky-header {
  position: fixed;
  z-index: 991;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  visibility: hidden;
  -webkit-transform: translateY(-120%);
  transform: translateY(-120%);
  -webkit-transition: visibility 500ms ease, -webkit-transform 500ms ease;
  transition: visibility 500ms ease, -webkit-transform 500ms ease;
  transition: transform 500ms ease, visibility 500ms ease;
  transition: transform 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease;
  -webkit-box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
}

@media (max-width: 1199px) {
  .stricky-header {
    display: none !important;
  }
}
.stricky-header.stricky-fixed {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;
}

.main-menu .mobile-nav__toggler {
  font-size: 20px;
  color: var(--roofsie-base, #ff4f47);
  cursor: pointer;
  -webkit-transition: 500ms;
  transition: 500ms;
}

.main-menu .mobile-nav__toggler:hover {
  color: var(--roofsie-black, #1c1b1f);
}

@media (min-width: 1200px) {
  .main-menu .mobile-nav__toggler {
    display: none;
  }
}
/*--------------------------------------------------------------
# Mobile Nav
--------------------------------------------------------------*/
.mobile-nav__wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
  transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
  transition: transform 500ms ease 500ms, visibility 500ms ease 500ms;
  transition: transform 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
  visibility: hidden;
}

.mobile-nav__wrapper .container {
  padding-left: 0;
  padding-right: 0;
}

.mobile-nav__wrapper.expanded {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  visibility: visible;
  -webkit-transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
  transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
  transition: transform 500ms ease 0ms, visibility 500ms ease 0ms;
  transition: transform 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
}

.mobile-nav__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  opacity: 0.5;
  cursor: pointer;
}

.mobile-nav__content {
  width: 300px;
  background-color: var(--roofsie-black, #1c1b1f);
  z-index: 10;
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 15px;
  padding-right: 15px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
  transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
  transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms;
  transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
}

.mobile-nav__wrapper.expanded .mobile-nav__content {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
  transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
  transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms;
  transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
}

.mobile-nav__content .logo-box {
  margin-bottom: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mobile-nav__close {
  position: absolute;
  top: 20px;
  right: 15px;
  font-size: 18px;
  color: var(--roofsie-white);
  cursor: pointer;
}

.mobile-nav__content .main-menu__list,
.mobile-nav__content .main-menu__list > li > ul,
.mobile-nav__content .main-menu__list > li > ul > li > ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.mobile-nav__content .main-menu__list > li > ul,
.mobile-nav__content .main-menu__list > li > ul > li > ul {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: 0.5em;
}

.mobile-nav__content .main-menu__list > li:not(:last-child),
.mobile-nav__content .main-menu__list > li > ul > li:not(:last-child),
.mobile-nav__content .main-menu__list > li > ul > li > ul > li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav__content .main-menu__list > li > a,
.mobile-nav__content .main-menu__list > li > ul > li > a,
.mobile-nav__content .main-menu__list > li > ul > li > ul > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 30px;
  color: #ffffff;
  font-size: 14px;
  font-family: var(--roofsie-font, "Rubik", sans-serif);
  font-weight: 500;
  height: 46px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: 500ms;
  transition: 500ms;
}

.mobile-nav__content .main-menu__list > li > a.expanded .mobile-nav__content .main-menu__list > li > ul > li > a.expanded .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a.expanded {
  color: var(--roofsie-base, #ff4f47);
}

.mobile-nav__content .main-menu__list > li > a > button,
.mobile-nav__content .main-menu__list > li > ul > li > a > button,
.mobile-nav__content .main-menu__list > li > ul > li > ul > li > a > button {
  width: 30px;
  height: 30px;
  background-color: var(--roofsie-base, #ff4f47);
  border: none;
  outline: none;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transition: -webkit-transform 500ms ease;
  transition: -webkit-transform 500ms ease;
  transition: transform 500ms ease;
  transition: transform 500ms ease, -webkit-transform 500ms ease;
  padding: 0;
}

.mobile-nav__content .main-menu__list > li > a > button.expanded,
.mobile-nav__content .main-menu__list > li > ul > li > a > button.expanded,
.mobile-nav__content .main-menu__list > li > ul > li > ul > li > a > button.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  background-color: #fff;
  color: var(--roofsie-base, #ff4f47);
}

/* no menu after 2rd level dropdown */
.mobile-nav__content .main-menu__list > li > ul > li > ul > li > a > button,
.mobile-nav__content .main-menu__list > li > ul > li > ul > li > ul {
  display: none !important;
}

.mobile-nav__container {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav__contact {
  margin-bottom: 0;
  margin-top: 20px;
  margin-bottom: 20px;
}

.mobile-nav__contact li {
  color: var(--roofsie-text-dark);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.mobile-nav__contact li + li {
  margin-top: 15px;
}

.mobile-nav__contact li a {
  color: #ffffff;
  -webkit-transition: 500ms;
  transition: 500ms;
}

.mobile-nav__contact li a:hover {
  color: var(--roofsie-base, #ff4f47);
}

.mobile-nav__contact li > i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--roofsie-base, #ff4f47);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  font-size: 11px;
  margin-right: 10px;
  color: #fff;
}

/*--------------------------------------------------------------
# Home Showcase
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Navigations Two
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Navigations Three
--------------------------------------------------------------*/


.main-menu .main-menu__list > li > ul > li > ul {
  top: 66%;
}


.main-menu .main-menu__list > li > ul > li > ul {
  top: 0%;
}

/*--------------------------------------------------------------
# Search Popup
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Main Slider
--------------------------------------------------------------*/
.main-slider {
  position: relative;
  display: block;
  z-index: 91;
}

.main-slider .swiper-slide {
  position: relative;
  background-color: var(--roofsie-black, #1c1b1f);
}

.main-slider .container {
  position: relative;
  padding-top: 157px;
  padding-bottom: 155px;
  z-index: 30;
}

.main-slider .image-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 150px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity 1500ms ease-in, -webkit-transform 7000ms ease;
  transition: opacity 1500ms ease-in, -webkit-transform 7000ms ease;
  transition: transform 7000ms ease, opacity 1500ms ease-in;
  transition: transform 7000ms ease, opacity 1500ms ease-in, -webkit-transform 7000ms ease;
  z-index: 1;
}

.main-slider .swiper-slide-active .image-layer {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

.main-slider .image-layer:before {
  position: absolute;
  left: -1px;
  top: 0px;
  bottom: 0;
  right: 0;
  content: "";
  background-image: -moz-linear-gradient(-1deg, rgb(28, 27, 31) 0%, rgba(28, 27, 31, 0) 100%);
  background-image: -webkit-linear-gradient(-1deg, rgb(28, 27, 31) 0%, rgba(28, 27, 31, 0) 100%);
  background-image: -ms-linear-gradient(-1deg, rgb(28, 27, 31) 0%, rgba(28, 27, 31, 0) 100%);
  z-index: -1;
}

.main-slider .image-layer:after {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0;
  right: 0;
  content: "";
  background-color: rgba(var(--roofsie-black-rgb), 0.3);
  z-index: -1;
}

.main-slider__content {
  position: relative;
  display: block;
  text-align: left;
}

.main-slider__sub-title {
  font-size: 24px;
  color: var(--roofsie-base, #ff4f47);
  font-weight: 800;
  line-height: 34px;
  margin-bottom: 6px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-120px);
  transform: translateY(-120px);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
  -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease;
  transition: opacity 2000ms ease, -webkit-transform 2000ms ease;
  transition: transform 2000ms ease, opacity 2000ms ease;
  transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease;
}

.main-slider__title {
  position: relative;
  font-size: 70px;
  color: var(--roofsie-white);
  font-weight: 800;
  line-height: 80px;
  margin-bottom: 28px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-120px);
  transform: translateY(-120px);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
  -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease;
  transition: opacity 2000ms ease, -webkit-transform 2000ms ease;
  transition: transform 2000ms ease, opacity 2000ms ease;
  transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease;
}

.main-slider__text {
  font-size: 18px;
  color: var(--roofsie-white);
  font-weight: 500;
  line-height: 30px;
  padding-bottom: 42px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(120px);
  transform: translateY(120px);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
  -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease;
  transition: opacity 2000ms ease, -webkit-transform 2000ms ease;
  transition: transform 2000ms ease, opacity 2000ms ease;
  transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease;
}

.main-slider .swiper-slide-active .main-slider__text {
  visibility: visible;
  opacity: 0.6;
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
}

.main-slider__btn-box {
  position: relative;
  display: block;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(120px);
  transform: translateY(120px);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
  -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease;
  transition: opacity 2000ms ease, -webkit-transform 2000ms ease;
  transition: transform 2000ms ease, opacity 2000ms ease;
  transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease;
}

.main-slider__btn:hover {
  color: var(--roofsie-base, #ff4f47);
}

.main-slider__btn:before {
  background-color: var(--roofsie-white);
}

.main-slider__btn:hover i {
  background-color: var(--roofsie-base, #ff4f47);
  color: var(--roofsie-white);
}

.main-slider .swiper-slide-active .main-slider__title,
.main-slider .swiper-slide-active .main-slider__sub-title,
.main-slider .swiper-slide-active .main-slider__btn-box {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
}

/*--------------------------------------------------------------
# Main Slider Two
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Main Slider Three
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Feature One
--------------------------------------------------------------*/
.feature-one {
  position: relative;
  display: block;
  padding: 0 0 27px;
  margin-top: -3px;
  z-index: 92;
}

.feature-one__inner {
  position: relative;
  display: block;
}

.feature-one__single {
  position: relative;
  display: block;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 10px 39.2px 0.8px rgba(0, 0, 0, 0.1);
  padding: 0 40px 30px;
  margin-bottom: 93px;
  z-index: 1;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.feature-one__single:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--roofsie-base, #ff4f47);
}

.feature-one__single:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--roofsie-black, #1c1b1f);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  opacity: 0;
  visibility: hidden;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: -1;
}

.feature-one__single:hover:after {
  opacity: 1;
  visibility: visible;
}

.feature-one__single-inner {
  position: relative;
  display: block;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
  z-index: 1;
}

.feature-one__top {
  display: flex;
  align-items: flex-end;
}

.feature-one__icon {
  position: relative;
  display: flex;
  background-color: var(--roofsie-base, #ff4f47);
  height: 82px;
  width: 96px;
  text-align: center;
  justify-content: center;
}

.feature-one__icon:before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 60px solid var(--roofsie-base, #ff4f47);
  border-left: 69px solid transparent;
  border-right: 69px solid transparent;
}

.feature-one__icon span {
  position: relative;
  display: inline-block;
  font-size: 65px;
  color: var(--roofsie-white);
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.feature-one__single:hover .feature-one__icon span {
  transform: scale(0.9);
}

.feature-one__title-box {
  position: relative;
  margin-left: 35px;
  top: 4px;
}

.feature-one__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
}

.feature-one__title a {
  color: var(--roofsie-black, #1c1b1f);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.feature-one__single:hover .feature-one__title a {
  color: var(--roofsie-white);
}

.feature-one__text {
  padding-top: 21px;
  padding-bottom: 11px;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.feature-one__single:hover .feature-one__text {
  color: #86838c;
}

.feature-one__read-more {
  position: relative;
  display: flex;
  align-items: center;
}

.feature-one__read-more a {
  font-size: 12px;
  font-weight: 700;
  color: var(--roofsie-black, #1c1b1f);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.feature-one__single:hover .feature-one__read-more a {
  color: var(--roofsie-base, #ff4f47);
}

.feature-one__read-more a i {
  position: relative;
  display: inline-block;
  height: 13px;
  width: 13px;
  background-color: var(--roofsie-base, #ff4f47);
  border-radius: 50%;
  color: var(--roofsie-white);
  font-size: 7px;
  line-height: 13px;
  text-align: center;
  top: -2px;
  margin-left: 5px;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.feature-one__single:hover .feature-one__read-more a i {
  color: var(--roofsie-black, #1c1b1f);
}

/*--------------------------------------------------------------
# About One
--------------------------------------------------------------*/
.about-one {
  position: relative;
  display: block;
  padding: 0 0 120px;
}

.about-one__left {
  position: relative;
  display: block;
  margin-right: 70px;
}

.about-one__img-box {
  position: relative;
  display: block;
}

.about-one__img {
  position: relative;
  display: block;
}

.about-one .about-one__img > img {
  width: 100%;
  border-radius: 10px;
}

.about-one__satisfied {
  position: absolute;
  bottom: 100px;
  left: -60px;
  z-index: 1;
}

.about-one__satisfied-inner {
  position: relative;
  display: block;
  z-index: 1;
}

.about-one__satisfied-content {
  position: relative;
  display: block;
  background-color: var(--roofsie-base, #ff4f47);
  padding: 21px 40px 28px;
  z-index: 1;
}

.about-one__satisfied-count-box {
  position: relative;
  display: flex;
  align-items: center;
}

.about-one__satisfied-count-box h3 {
  font-size: 55px;
  color: var(--roofsie-white);
  font-weight: 800;
  line-height: 55px !important;
  font-family: var(--roofsie-font) !important;
}

.about-one__satisfied-text {
  font-size: 20px;
  color: var(--roofsie-white);
  font-weight: 400;
  line-height: 20px;
}

.about-one__big-text {
  font-size: 100px;
  color: #f4f1ee;
  text-transform: uppercase;
  line-height: 100px;
  letter-spacing: 0.18em;
  position: absolute;
  top: 231px;
  left: -366px;
  transform: rotate(-90deg);
  font-weight: 800;
}

.about-one__right {
  position: relative;
  display: block;
}

.about-one__right .section-title {
  margin-bottom: 31px;
}

.about-one__points {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 41px;
  margin-bottom: 41px;
}

.about-one__points li {
  position: relative;
  display: block;
}

.about-one__points li + li {
  margin-left: 13px;
}

.about-one__points li .icon-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 21px;
}

.about-one__points li .icon-box .icon {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 26px;
  color: var(--roofsie-base, #ff4f47);
}

.about-one__points li .icon-box .text-box {
  margin-left: 10px;
}

.about-one__points li .icon-box .text-box p {
  font-size: 18px;
  font-weight: 700;
  color: var(--roofsie-black, #1c1b1f);
  font-family: var(--roofsie-font);
}

/*--------------------------------------------------------------
# Site Footer
--------------------------------------------------------------*/
.services-one {
  position: relative;
  display: block;
  padding: 120px 0 90px;
  z-index: 1;
}

.services-one:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  content: "";
  background-color: var(--roofsie-black, #1c1b1f);
  height: 505px;
  z-index: -1;
}

.services-one__top {
  position: relative;
  display: block;
  margin-bottom: 49px;
}

.services-one__top-left {
  position: relative;
  display: block;
}

.services-one__top-left .section-title {
  margin-bottom: 0;
}

.services-one__top-left .section-title__title {
  color: var(--roofsie-white);
}

.services-one__top-right {
  position: relative;
  display: block;
  margin-top: 26px;
}

.services-one__top-right-text {
  color: #817e87;
}

.services-one__bottom {
  position: relative;
  display: block;
}

.services-one__single {
  position: relative;
  display: block;
  margin-bottom: 30px;
}

.services-one__single .services-one__img {
  position: relative;
  display: block;
  overflow: hidden;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  z-index: 1;
}

.services-one__img:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  background-color: rgba(var(--roofsie-black-rgb), 0.3);
  opacity: 1;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform: perspective(400px) rotateX(-90deg) scale(0.2);
  -ms-transform: perspective(400px) rotateX(-90deg) scale(0.2);
  transform: perspective(400px) rotateX(-90deg) scale(0.2);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  z-index: 1;
}

.services-one__single:hover .services-one__img:before {
  opacity: 1;
  -webkit-transform: perspective(400px) rotateX(0deg) scale(1);
  -ms-transform: perspective(400px) rotateX(0deg) scale(1);
  transform: perspective(400px) rotateX(0deg) scale(1);
}

.services-one__single .services-one__img img {
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  transition-delay: 0.1s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.7s;
  transition-property: all;
}

.services-one__single:hover .services-one__img img {
  transform: scale(1.1) rotate(2deg);
}

.services-one__content {
  position: relative;
  display: block;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.07);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 22px 30px 19px;
  z-index: 1;
}

.services-one__icon {
  position: absolute;
  top: -60px;
  right: 20px;
  background-color: var(--roofsie-base, #ff4f47);
  height: 80px;
  width: 80px;
  border-radius: var(--roofsie-bdr-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.services-one__icon span {
  position: relative;
  display: inline-block;
  font-size: 45px;
  color: var(--roofsie-white);
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.services-one__single:hover .services-one__icon span {
  transform: scale(0.9);
}

.services-one__title {
  font-size: 24px;
  font-weight: 800;
  line-height: 34px;
  margin-bottom: 14px;
}

.services-one__title a {
  color: var(--roofsie-black, #1c1b1f);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.services-one__title a:hover {
  color: var(--roofsie-base, #ff4f47);
}

/*--------------------------------------------------------------
# Why Choose One
--------------------------------------------------------------*/
.why-choose-one {
  position: relative;
  display: block;
  background-color: var(--roofsie-primary);
  padding: 120px 0 90px;
  overflow: hidden;
  z-index: 1;
}

.why-choose-one__left {
  position: relative;
  display: block;
}

.why-choose-one__left .section-title {
  margin-bottom: 31px;
}

.why-choose-one__points-box {
  position: relative;
  display: block;
  margin-top: 41px;
}

.why-choose-one__points-single {
  position: relative;
  display: flex;
  align-items: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0.175px 9.998px 37.24px 0.76px rgba(0, 0, 0, 0.1);
  border-radius: var(--roofsie-bdr-radius);
  padding: 33px 35px 29px;
  margin-bottom: 30px;
  border-bottom: 4px solid #ede8e4;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.why-choose-one__points-single:hover {
  border-bottom: 4px solid var(--roofsie-base, #ff4f47);
}

.why-choose-one__points-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.why-choose-one__points-icon span {
  position: relative;
  display: inline-block;
  font-size: 64px;
  color: var(--roofsie-base, #ff4f47);
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.why-choose-one__points-single:hover .why-choose-one__points-icon span {
  transform: scale(0.9);
}

.why-choose-one__points-title-box {
  margin-left: 20px;
}

.why-choose-one__points-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
}

.why-choose-one__right {
  position: relative;
  display: block;
  margin-left: 60px;
}

.why-choose-one__img-box {
  position: relative;
  display: block;
  z-index: 1;
}

.why-choose-one__img {
  position: absolute;
  top: -15px;
  left: 0;
  z-index: 2;
}

.why-choose-one__img img {
  width: 100%;
}

.why-choose-one__shape-1 {
  border-radius: 50%;
  background-color: rgb(237, 232, 228);
  width: 515px;
  height: 515px;
  position: absolute;
  top: -60px;
  left: 6px;
}

.why-choose-one__shape-2 {
  position: absolute;
  right: -83px;
  top: 241px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  width: 194px;
  height: 195px;
}

/*--------------------------------------------------------------
# Brand One
--------------------------------------------------------------*/
.brand-one {
  position: relative;
  display: block;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07);
}

.brand-one__inner {
  position: relative;
  display: block;
  padding: 45px 0 45px;
  overflow: hidden;
}

/*--------------------------------------------------------------
# Site Footer
--------------------------------------------------------------*/
.project-one {
  position: relative;
  display: block;
  padding: 120px 0 165px;
}

.project-one__top {
  position: relative;
  display: block;
}

.project-one__bottom {
  position: relative;
  display: block;
}

.project-one__single {
  position: relative;
  display: block;
}

.project-one__img-box {
  position: relative;
  display: block;
  z-index: 1;
}

.project-one__img-box:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 3px;
  height: 0;
  content: "";
  background-image: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  transition: all 500ms ease;
  z-index: 2;
}

.project-one__single:hover .project-one__img-box:before {
  height: 100%;
  transition-delay: 500ms;
}

.project-one__img-box:after {
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 30px;
  height: 3px;
  width: 0;
  content: "";
  background-image: -moz-linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.01) 99%, rgb(255, 255, 255) 100%);
  background-image: -webkit-linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.01) 99%, rgb(255, 255, 255) 100%);
  background-image: -ms-linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.01) 99%, rgb(255, 255, 255) 100%);
  transition: all 700ms ease;
  z-index: 2;
}

.project-one__single:hover .project-one__img-box:after {
  width: 101%;
  transition-delay: 500ms;
}

.project-one__img {
  position: relative;
  display: block;
  border-radius: var(--roofsie-bdr-radius);
  overflow: hidden;
  z-index: 1;
}

.project-one__img:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  background-color: rgba(var(--roofsie-base-rgb), 0.9);
  border-radius: var(--roofsie-bdr-radius);
  -webkit-transform: perspective(400px) rotateX(90deg) scaleY(0.5);
  -ms-transform: perspective(400px) rotateX(90deg) scaleY(0.5);
  transform: perspective(400px) rotateX(90deg) scaleY(0.5);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  transition-delay: 0.1s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.5s;
  transition-property: all;
  z-index: 1;
}

.project-one__single:hover .project-one__img:before {
  -webkit-transform: perspective(400px) rotateX(0deg) scaleY(1);
  -ms-transform: perspective(400px) rotateX(0deg) scaleY(1);
  transform: perspective(400px) rotateX(0deg) scaleY(1);
  transition-delay: 0.1s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.7s;
  transition-property: all;
}

.project-one__single .project-one__img img {
  width: 100%;
  border-radius: var(--roofsie-bdr-radius);
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: all 500ms ease;
}

.project-one__single:hover .project-one__img img {
  transform: scale(1.05);
}

.project-one__content {
  position: absolute;
  left: 60px;
  bottom: 60px;
  opacity: 0;
  transform: translateY(-50px);
  transition: all 700ms ease;
  z-index: 2;
}

.project-one__single:hover .project-one__content {
  opacity: 1;
  transform: translateY(0%);
  transition-delay: 700ms;
}

.project-one__title {
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
}

.project-one__title a {
  color: var(--roofsie-white);
}

/*--------------------------------------------------------------
# Trust Company
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Testimonial One
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Blog One
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# CTA One
--------------------------------------------------------------*/
.cta-one {
  position: relative;
  display: block;
  background-color: var(--roofsie-base, #ff4f47);
}

.cta-one__img-box {
  position: absolute;
  top: -40px;
  bottom: -1px;
  left: 0;
  max-width: 694px;
  width: 100%;
}

.cta-one__img-box:before {
  position: absolute;
  top: 0;
  right: -19px;
  content: "";
  border-left: 17px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 40px solid var(--roofsie-black, #1c1b1f);
  z-index: 2;
  transform: rotate(-1deg);
}

.cta-one__img {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

.cta-one__img img {
  width: 100%;
}

.cta-one__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 370px;
  padding-top: 77px;
  padding-bottom: 77px;
}

.cta-one__left {
  position: relative;
  display: block;
}

.cta-one__sub-title {
  font-size: 14px;
  color: var(--roofsie-white);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.7;
  line-height: 24px;
}

.cta-one__title {
  font-size: 40px;
  color: var(--roofsie-white);
  font-weight: 800;
  line-height: 50px;
  margin-top: 2px;
}

.cta-one__btn-box {
  position: relative;
  display: block;
}

.cta-one__btn {
  background-color: var(--roofsie-black, #1c1b1f);
}

.cta-one__btn i {
  color: var(--roofsie-black, #1c1b1f);
}

.cta-one__btn:before {
  background-color: var(--roofsie-white);
}

.cta-one__btn:hover {
  color: var(--roofsie-base, #ff4f47);
}

.cta-one__btn:hover i {
  background-color: var(--roofsie-base, #ff4f47);
  color: var(--roofsie-white);
}

/*--------------------------------------------------------------
# Site Footer
--------------------------------------------------------------*/
.site-footer {
  position: relative;
  display: block;
  background-color: var(--roofsie-black, #1c1b1f);
  z-index: 1;
}

.site-footer__top {
  position: relative;
  display: block;
  padding: 118px 0 120px;
}

.footer-widget__about {
  position: relative;
  display: block;
  margin-right: 45px;
  margin-top: -5px;
}

.footer-widget__about-text-box {
  position: relative;
  display: block;
}

.footer-widget__about-text {
  color: var(--roofsie-white);
  line-height: 30px;
  font-size: 20px;
  font-weight: 700;
}

.footer-widget__title {
  font-size: 20px;
  color: var(--roofsie-white);
  font-weight: 800;
  line-height: 20px;
  margin-bottom: 30px;
}

.footer-widget__explore {
  position: relative;
  display: block;
}

.footer-widget__explore-list {
  position: relative;
  display: block;
  margin-top: -3px;
}

.footer-widget__explore-list li {
  position: relative;
  display: block;
}

.footer-widget__explore-list li + li {
  margin-top: 3px;
}

.footer-widget__explore-list li a {
  font-size: 15px;
  color: #86838c;
  font-weight: 400;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.footer-widget__explore-list li a:hover {
  color: var(--roofsie-white);
}

.footer-widget__contact {
  position: relative;
  display: block;
}

.footer-widget__contact-text {
  font-size: 15px;
  color: #86838c;
  font-weight: 400;
  line-height: 26px;
  padding-bottom: 33px;
}

.footer-widget__contact-list {
  position: relative;
  display: block;
}

.footer-widget__contact-list li {
  position: relative;
  display: flex;
  align-items: center;
}

.footer-widget__contact-list li .icon {
  position: relative;
  display: flex;
  align-items: center;
}

.footer-widget__contact-list li .icon i {
  font-size: 13px;
  color: var(--roofsie-base, #ff4f47);
}

.footer-widget__contact-list li .text {
  margin-left: 10px;
}

.footer-widget__contact-list li .text p {
  font-size: 15px;
  font-weight: 700;
}

.footer-widget__contact-list li .text p a {
  color: var(--roofsie-white);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.footer-widget__contact-list li .text p a:hover {
  color: var(--roofsie-base, #ff4f47);
}

.site-footer__bottom {
  position: relative;
  display: block;
}

.site-footer__bottom-inner {
  position: relative;
  display: block;
  text-align: center;
  border-top: 2px solid rgba(var(--roofsie-white-rgb), 0.1);
  padding: 32px 0;
}

.site-footer__bottom-text {
  font-size: 15px;
  color: #86838c;
  font-weight: 400;
}

.site-footer__bottom-text a {
  color: #86838c;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.site-footer__bottom-text a:hover {
  color: var(--roofsie-white);
}

/*--------------------------------------------------------------
# About Two
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Services Two
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Why Choose Two
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Testimonial TWo
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Project Two
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Pricing One
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Awards
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Newsletter
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Blog Two
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Google Map
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Appointment
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Services Three
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# About Three
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Project Three
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Team One
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Process
--------------------------------------------------------------*/
.process {
  position: relative;
  display: block;
  background-color: var(--roofsie-base, #ff4f47);
  padding: 117px 0 30px;
  counter-reset: count;
  z-index: 1;
}

.process__single {
  position: relative;
  display: block;
  margin-bottom: 70px;
}

.process__content-box {
  position: relative;
  display: block;
  padding-left: 130px;
}

.process__icon-box {
  position: absolute;
  top: 50px;
  left: 0;
}

.process__icon-box:after {
  position: absolute;
  top: -168px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  background-image: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  width: 4px;
  height: 120px;
}

.process__icon-box::before {
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  background-image: -moz-linear-gradient(270deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(270deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(270deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  width: 4px;
  height: 120px;
}

.process__icon {
  position: relative;
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process__icon span {
  position: relative;
  display: inline-block;
  font-size: 50px;
  color: var(--roofsie-white);
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.process__single:hover .process__icon span {
  transform: scale(0.9);
}

.process__count {
  position: absolute;
  top: -50px;
  left: 50%;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: var(--roofsie-black, #1c1b1f);
  z-index: 2;
  transform: translateX(-50%);
}

.process__count:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 14px;
  line-height: 40px;
  font-weight: 700;
  counter-increment: count;
  content: "0" counter(count);
  transition: all 200ms linear;
  transition-delay: 0.1s;
  color: var(--roofsie-white);
  text-align: center;
  font-family: var(--roofsie-font);
}

.process__details {
  position: relative;
  display: block;
}

.process__title {
  font-size: 24px;
  font-weight: 800;
  line-height: 28px;
  color: var(--roofsie-white);
  margin-bottom: 24px;
}

.process__text {
  color: var(--roofsie-white);
}

/*--------------------------------------------------------------
# FAQ One
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Counter One
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Blog Three
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Page Header
--------------------------------------------------------------*/
.page-header {
  position: relative;
  display: block;
  padding: 131px 0 138px;
  z-index: 1;
}

.page-header-bg {
  background-color: #4C4B4E;
}

.page-header-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  z-index: -1;
}

.page-header-bg:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1200px;
  content: "";
  background-image: -moz-linear-gradient(-1deg, rgb(28, 27, 31) 0%, rgba(28, 27, 31, 0) 100%);
  background-image: -webkit-linear-gradient(-1deg, rgb(28, 27, 31) 0%, rgba(28, 27, 31, 0) 100%);
  background-image: -ms-linear-gradient(-1deg, rgb(28, 27, 31) 0%, rgba(28, 27, 31, 0) 100%);
}

.page-header__inner {
  position: relative;
  display: block;
  z-index: 15;
}

.page-header__inner h2 {
  font-size: 48px;
  color: var(--roofsie-white);
  font-weight: 800;
  line-height: 58px;
  margin-top: 9px;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.thm-breadcrumb {
  position: relative;
  display: block;
}

.thm-breadcrumb li {
  position: relative;
  display: inline-block;
  color: var(--roofsie-base, #ff4f47);
  font-size: 16px;
  font-weight: 600;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.thm-breadcrumb li + li {
  margin-left: 4px;
}

.thm-breadcrumb li a {
  position: relative;
  display: inline-block;
  color: var(--roofsie-base, #ff4f47);
  font-size: 16px;
  font-weight: 600;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  text-transform: capitalize;
}

.thm-breadcrumb li:hover a {
  color: var(--roofsie-white);
}

/*--------------------------------------------------------------
# Blog Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Blog Sidebar
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Blog Details
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Work Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Similar Project
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Services Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Service Details
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Contact Details
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Contact Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Team Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Team Details
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Team Experience
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Testimonials Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Gallery Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# FAQ Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Contact Page Two
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Error Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# About Four
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Team Two
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Blog Carousel Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Gallery Carousel Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Services Carousel Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Team Carousel Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Testimonials Carousel Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Work Carousel Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Boxed Version
--------------------------------------------------------------*/

.page-header b {
  color: #fff;
}

.thm-breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--roofsie-base, #ff4f47);
  font-size: 14px;
  margin-left: 10px;
  margin-right: 10px;
}

/* Responsive
--------------------------------------------- */
/* Medium screen  */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .feature-one__single {
    padding: 0 17px 30px;
  }
  .about-one__left {
    max-width: 600px;
    margin: 0 auto 50px;
  }
  .about-one__right {
    max-width: 600px;
    margin: 0 auto 0;
  }
  .services-one__top-left .section-title__title {
    font-size: 39px;
  }
  .services-one__content {
    padding: 22px 25px 19px;
  }
  .why-choose-one__left {
    max-width: 600px;
    margin: 0 auto 0;
  }
  .why-choose-one__right {
    max-width: 600px;
    margin: 0 auto 0;
  }
  .why-choose-one__img {
    position: relative;
    top: 90px;
    left: 0;
  }
  .why-choose-one__shape-1 {
    top: 46px;
  }
  .cta-one__img-box {
    display: none;
  }
  .cta-one__inner {
    padding-left: 0;
  }
  .footer-widget__contact {
    margin-top: 28px;
  }
}
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-one__left {
    max-width: 600px;
    margin: 0 auto 50px;
  }
  .about-one__right {
    max-width: 600px;
    margin: 0 auto 0;
  }
  .services-one__top-right {
    margin-top: 30px;
  }
  .why-choose-one__left {
    max-width: 600px;
    margin: 0 auto 0;
  }
  .why-choose-one__right {
    max-width: 600px;
    margin: 0 auto 0;
  }
  .why-choose-one__img {
    position: relative;
    top: 90px;
    left: 0;
  }
  .why-choose-one__shape-1 {
    top: 46px;
  }
  .cta-one__img-box {
    display: none;
  }
  .cta-one__inner {
    padding-left: 0;
  }
  .footer-widget__contact {
    margin-top: 28px;
  }
  .process__icon-box::before {
    display: none;
  }
  .process__icon-box::after {
    display: none;
  }
  .process {
    padding: 120px 0 90px;
  }
}
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
  .section-title__title br {
    display: none;
  }
  .section-title__title {
    font-size: 30px;
    line-height: 40px;
  }
  .feature-one__single {
    padding: 0 17px 30px;
  }
  .about-one__left {
    margin-right: 0;
    margin-bottom: 50px;
  }
  .about-one__satisfied {
    display: none;
  }
  .services-one__top-right {
    margin-top: 30px;
  }
  .why-choose-one__img {
    position: relative;
    top: 90px;
    left: 0;
  }
  .why-choose-one__right {
    margin-left: 0;
  }
  .why-choose-one__shape-1,
  .why-choose-one__shape-2 {
    display: none;
  }
  .cta-one__img-box {
    display: none;
  }
  .cta-one__inner {
    padding-left: 0;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .cta-one__left {
    margin-bottom: 25px;
  }
  .footer-widget__about {
    margin-right: 0;
  }
  .footer-widget__explore {
    margin-top: 38px;
    margin-bottom: 28px;
  }
  .footer-widget__contact {
    margin-top: 38px;
  }
  .process__icon-box::before {
    display: none;
  }
  .process__icon-box::after {
    display: none;
  }
  .process {
    padding: 120px 0 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1740px) {
  .cta-one__img-box {
    display: none;
  }
  .cta-one__inner {
    padding-left: 0;
  }
}
/*--------------------------------------------------------------
# Slider All Responsice Css
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  .main-slider__sub-title {
    font-size: 22px;
    margin-bottom: 8px;
  }
  .main-slider__title {
    font-size: 34px;
    line-height: 50px;
  }
  .main-slider__text br {
    display: none;
  }
}
/*--------------------------------------------------------------
# Main Menu All Responsice Css
--------------------------------------------------------------*/
@media only screen and (min-width: 1400px) and (max-width: 1670px) {
  .main-menu__call {
    display: none;
  }
  .main-menu__wrapper-inner {
    padding-left: 300px;
  }
  .main-header__top {
    padding-left: 300px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu__call {
    display: none;
  }
  .main-menu__wrapper-inner {
    padding-left: 235px;
    padding-right: 30px;
  }
  .main-header__top {
    padding-left: 235px;
    padding-right: 30px;
  }
  .main-header__logo {
    left: 30px;
  }
  .main-menu__btn-box {
    margin-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-header__top {
    padding-left: 235px;
    padding-right: 30px;
    padding-top: 12.5px;
    padding-bottom: 12.5px;
  }
  .main-header__top-menu-box {
    display: none;
  }
  .main-header__logo {
    left: 30px;
  }
  .main-menu__wrapper-inner {
    padding-left: 235px;
    padding-right: 30px;
  }
  .main-menu .mobile-nav__toggler {
    display: block;
    padding: 35px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .main-header__top {
    display: none;
  }
  .main-header__logo {
    left: 30px;
  }
  .main-menu__wrapper-inner {
    padding-left: 235px;
    padding-right: 30px;
  }
  .main-menu__call {
    display: none;
  }
  .main-menu .mobile-nav__toggler {
    display: block;
    padding: 35px 0;
  }
}
@media (max-width: 767px) {
  .main-header__top {
    display: none;
  }
  .main-header__logo {
    left: 30px;
  }
  .main-menu__wrapper-inner {
    padding-left: 0;
    padding-right: 30px;
  }
  .main-menu__left {
    float: right;
  }
  .main-menu__right {
    display: none;
  }
  .main-menu .mobile-nav__toggler {
    display: block;
    padding: 35px 0;
  }
}