/*--------------------------------------------------------------
    MIXINS
--------------------------------------------------------------*/
/*Font styles - Take the pain out of setting styles for a font. (This assumes you have already included the font), set your fallback font once and you never have to worry again.*/
/*Pseudo - When using ::before and ::after you'll always need these three, so we're saving two lines of code every time you use this.*/
/*Pseudo - When using ::before and ::after to create an icon*/
/*Placeholders - They're a pain as you have to set the style in all the separate formats, this sorts it for you.*/
/*Just in case there are people how aren't used to using @content here is a usage example:
input,  
textarea {  
    @include input-placeholder {
        color: $grey;
    }
}
 */
/*Media queries - A massive time saver! You can just use pixel values but we have some default breakpoints setup that work too, another time saver while keeping your breakpoints consistent.*/
/* The example below showing the padding and font-size increasing once the viewport gets over 1024px.
.site-header {
    padding: 2rem;
    font-size: 1.8rem;
    @include mq('tablet-wide') {
        padding-top: 4rem;
        font-size: 2.4rem;
    }
}
*/
/*Truncate - Adding Truncation to an element isn't as simple as it should be, although it is with this handy time saver, meaning when you include the mixin, you only have to specify your boundry with a max width value, happy days!*/
/* mixin for multiline */
/*--------------------------------------------------------------
    MIXINS
--------------------------------------------------------------*/
html {
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: scrollbar;
  min-height: 100vh;
}

body {
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #141633;
}

main {
  min-height: calc(100vh - 80px - 160px);
  margin-top: 80px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 767px) {
  main {
    min-height: calc(100vh - 55px - 100px);
    margin-top: 55px;
  }
}

h2 {
  font-family: "Roboto", sans-serif;
  font-size: 30px;
  color: #1C1C22;
  font-weight: 200;
  line-height: 33px;
  font-style: normal;
  margin: 0px;
  padding: 0px;
}

.btn.btn-black {
  background: #1F1A26;
  color: #FFFFFF;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 16px/1.6 "Roboto", sans-serif;
  padding: 20px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  width: fit-content;
  display: inline-block;
  position: relative;
}
.btn.btn-black:visited {
  color: #FFFFFF;
  text-decoration: none;
}
.btn.btn-black:hover {
  color: #e6e6e6;
  text-decoration: none;
}
.btn.btn-black:active {
  color: #e6e6e6;
  text-decoration: none;
}
.btn.large {
  padding: 20px 40px;
}
@media only screen and (max-width: 767px) {
  .btn.large {
    width: 100%;
  }
}

/*--------------------------------------------------------------
    Footer
--------------------------------------------------------------*/
.top-header {
  background: #ffffff;
  height: 80px;
  position: fixed;
  width: 100%;
  z-index: 1000;
  -webkit-box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 767px) {
  .top-header {
    height: 55px;
  }
}
.top-header .navbar {
  max-width: 1100px;
  width: 1100px;
  margin: 0 auto;
  padding: 0;
  height: 80px;
}
@media only screen and (max-width: 767px) {
  .top-header .navbar {
    width: 100%;
    min-width: 100%;
    padding: 0;
    align-items: center;
    height: 55px;
    min-height: 55px;
  }
}
@media only screen and (max-width: 767px) {
  .top-header .navbar .navbar-brand {
    margin-left: 20px;
  }
  .top-header .navbar .navbar-brand img {
    max-height: 36px;
  }
}
.top-header .navbar .navbar-toggler {
  color: #1C1C22;
  border: none;
  outline: none;
  height: 100%;
  padding-right: 20px;
}
.top-header .navbar .navbar-toggler span {
  display: block;
  width: 25px;
  height: 3px;
  margin-bottom: 4px;
  position: relative;
  background: #1C1C22;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.1s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.1s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.1s ease;
}
.top-header .navbar .navbar-toggler span:first-child {
  transform-origin: 0% 0%;
}
.top-header .navbar .navbar-toggler span:nth-last-child(2) {
  transform-origin: 0% 100%;
}
.top-header .navbar .navbar-toggler:not(.collapsed) {
  /*height: 10px; */
  border: 2px solid #000;
  padding: 1px 1px 0 1px;
  height: 22px;
  border-radius: 50%;
  /* display: flex; */
  width: 22px;
  margin: 17px 20px;
}
.top-header .navbar .navbar-toggler:not(.collapsed) span {
  /*opacity: 1;
  transform: rotate(45deg) translate(1px, -1px);
  background: #1C1C22;*/
  opacity: 1;
  transform: rotate(45deg) translate(6px, -1px);
  background: #1C1C22;
  width: 12px;
  height: 2px;
  /*
  * But let's hide the middle one.
  */
}
.top-header .navbar .navbar-toggler:not(.collapsed) span:nth-child(2) {
  opacity: 0;
}
.top-header .navbar .navbar-toggler:not(.collapsed) span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, 0px);
}
@media only screen and (max-width: 767px) {
  .top-header .navbar .navbar-collapse {
    background: #ffffff;
    padding: 0;
    text-align: right;
    min-height: calc(50vh - 80px);
    background: #ECECEC;
    -webkit-box-shadow: inset 0px 5px 7px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: inset 0px 5px 7px 0px rgba(0, 0, 0, 0.16);
    box-shadow: inset 0px 5px 7px 0px rgba(0, 0, 0, 0.16);
  }
}
@media only screen and (max-width: 767px) {
  .top-header .navbar .navbar-collapse .navbar-nav .nav-item {
    padding: 20px;
    border-bottom: 1px solid rgba(112, 112, 112, 0.1);
  }
}
.top-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link,
.top-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #1C1C22;
  font-weight: 600;
  line-height: 18px;
  font-style: normal;
  color: #1C1C22;
  text-decoration: none;
}
.top-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:visited,
.top-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active:visited {
  color: #1C1C22;
  text-decoration: none;
}
.top-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover,
.top-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active:hover {
  color: #4a4a5a;
  text-decoration: none;
}
.top-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:active,
.top-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active:active {
  color: #4a4a5a;
  text-decoration: none;
}
@media only screen and (max-width: 767px) {
  .top-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link,
.top-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active {
    padding: 0;
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    color: #1C1C22;
    font-weight: 400;
    line-height: 18px;
    font-style: normal;
    background-image: url("../img/arrow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    min-height: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .top-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link,
.top-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active {
    padding-right: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .top-header .navbar .navbar-collapse .navbar-nav .nav-item:last-child {
    border: none;
  }
}
@media only screen and (min-width: 768px) {
  .top-header .navbar .navbar-collapse .navbar-nav .nav-item:last-child .nav-link {
    padding-right: 0;
  }
}

/*--------------------------------------------------------------
    Footer
--------------------------------------------------------------*/
footer {
  margin-top: auto;
  background: #000000;
  min-height: 160px;
  height: 160px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  footer {
    min-height: 100px;
    height: 100px;
  }
}
footer p {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  color: #FFFFFF;
  font-weight: 400;
  line-height: 16px;
  font-style: normal;
  margin-bottom: 0;
}
footer .footer {
  display: flex;
  max-width: 1100px;
  width: 1100px;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  margin: 50px auto;
}
@media only screen and (max-width: 767px) {
  footer .footer {
    flex-direction: row;
    margin: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  footer .footer .logo-box {
    padding: 20px;
    text-align: left;
  }
}
footer .footer .logo-box img {
  max-height: 40px;
  height: 40px;
}
@media only screen and (max-width: 767px) {
  footer .footer .logo-box img {
    max-height: 51px;
    height: 51px;
  }
}
footer .footer .disclaimer {
  text-transform: uppercase;
  padding: 20px;
}
@media only screen and (min-width: 768px) {
  footer .footer .disclaimer {
    padding-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  footer .footer .disclaimer {
    max-width: 50%;
    text-align: right;
  }
}

/*--------------------------------------------------------------
    Forms
--------------------------------------------------------------*/
.form-group {
  margin-bottom: 20px;
  position: relative;
  vertical-align: top;
  margin-top: 0px;
  padding-left: 0px;
}
@media only screen and (max-width: 767px) {
  .form-group {
    padding-right: 0;
  }
}
.form-group .form_label {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  line-height: 20px;
  font-style: normal;
  -webkit-transition: all;
  -o-transition: all;
  transition: all;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  position: absolute;
  top: 15px;
  pointer-events: none;
  z-index: 0;
  left: 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}
.form-group .form_label .red {
  color: #FF0000;
}
.form-group.focused .form_label {
  top: 3px;
  font-size: 14px;
  color: rgba(250, 250, 255, 0.4);
  text-transform: uppercase;
}
.form-group.focused .form_label .red {
  color: rgba(20, 22, 51, 0.6);
}
.form-group textarea.form-control {
  padding-top: 10px;
}
.form-group .form-control {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  line-height: 20px;
  font-style: normal;
  width: 100%;
  padding: 10px 10px 5px 10px;
  border: none;
  border-bottom: 1px #fff solid;
  background: rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  resize: vertical;
  min-height: 55px;
}
.form-group .form_error {
  height: 30px;
}

/*--------------------------------------------------------------
    Pages
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  .homepage {
    background: #4E4EAF;
  }
}
.homepage .get-esitmate {
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .homepage .get-esitmate {
    padding-top: 210px;
    display: flex;
    flex-direction: column;
  }
}
.homepage .get-esitmate .bg-estimate {
  background-image: url("../img/shutterstock_1043501293.png");
  background-position: top right;
  background-size: cover;
  background-repeat: no-repeat;
  width: 65%;
  position: absolute;
  right: 0;
  min-height: 100%;
}
@media only screen and (max-width: 767px) {
  .homepage .get-esitmate .bg-estimate {
    width: 100%;
    left: 0;
    top: 0;
    background-image: url("../img/shutterstock_510408208.png");
    background-size: contain;
  }
}
.homepage .get-esitmate .black-container {
  background: #000;
  -webkit-clip-path: polygon(0 0, 55% 0, 40% 100%, 0% 100%);
  clip-path: polygon(0 0, 55% 0, 40% 100%, 0% 100%);
  outline: 1px solid transparent;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  @supports not (clip-path: polygon(0 0, 50% 0, 35% 100%, 0% 100%)) {
    .homepage .get-esitmate .black-container:after {
      content: "";
      position: absolute;
      height: 113%;
      background: #E7E7E7;
      border-right: #000 10px solid;
      width: 200px;
      right: 57%;
      top: -15%;
      -ms-transform: rotate(26deg);
      transform: rotate(25deg);
      z-index: 0;
      outline: 1px solid transparent;
    }
  }
}
@media only screen and (max-width: 767px) {
  .homepage .get-esitmate .black-container {
    -webkit-clip-path: polygon(0 0, 100% 15%, 100% 100%, 0% 85%);
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0% 85%);
    background: linear-gradient(to bottom, #000 0%, #000 50%, #000 50%, #4E4EAF 50%, #4E4EAF 100%);
  }
}
.homepage .get-esitmate .black-container .grey-container {
  background-color: #E7E7E7;
  -webkit-clip-path: polygon(0 0, calc(55% - 10px) 0, calc(40% - 10px) 100%, 0% 100%);
  clip-path: polygon(0 0, calc(55% - 10px) 0, calc(40% - 10px) 100%, 0% 100%);
  outline: 1px solid transparent;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .homepage .get-esitmate .black-container .grey-container {
    -webkit-clip-path: polygon(0 0, 100% calc(15% + 10px), 100% 100%, 0% 100%);
    clip-path: polygon(0 10px, 100% calc(15% + 10px), 100% 100%, 0% 100%);
    width: 100%;
  }
}
.homepage .get-esitmate .black-container .grey-container .inner-section {
  max-width: calc(1100px );
  width: calc(1100px);
  margin: auto;
  padding-top: 100px;
  padding-bottom: 100px;
}
@media only screen and (min-width: 768px) {
  .homepage .get-esitmate .black-container .grey-container .inner-section {
    position: relative;
    z-index: 1;
  }
}
@media only screen and (max-width: 767px) {
  .homepage .get-esitmate .black-container .grey-container .inner-section {
    max-width: 100%;
    width: 100%;
    padding: 90px 25px;
  }
}
.homepage .get-esitmate .black-container .grey-container .inner-section h2 {
  margin-bottom: 40px;
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .homepage .get-esitmate .black-container .grey-container .inner-section h2 {
    margin-bottom: 30px;
  }
}
.homepage .get-esitmate .black-container .grey-container .inner-section p {
  margin-bottom: 30px;
}
.homepage .services-ideas {
  background: #fff;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  flex-grow: 1;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .homepage .services-ideas {
    background: none;
  }
}
.homepage .services-ideas .bg-services {
  position: absolute;
  top: 0;
  left: 0;
  background: #4E4EAF;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(0 0, 50% 0, 65% 100%, 0% 100%);
  clip-path: polygon(0 0, 50% 0, 65% 100%, 0% 100%);
}
@media only screen and (max-width: 767px) {
  .homepage .services-ideas .bg-services {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  @supports not (clip-path: polygon(0 0, 50% 0, 65% 100%, 0% 100%)) {
    .homepage .services-ideas .bg-services {
      max-width: 60%;
      width: 60%;
      background-clip: content-box;
      overflow: hidden;
    }
    .homepage .services-ideas .bg-services:after {
      content: "";
      right: -20%;
      bottom: 0;
      width: 42%;
      -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: skew(25deg);
      -ms-transform: skew(25deg);
      transform: skew(25deg);
      position: absolute;
      background: #fff;
      height: 100%;
    }
  }
}
.homepage .services-ideas .inner-section {
  max-width: 1100px;
  width: 1100px;
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom: 100px;
}
@media only screen and (min-width: 768px) {
  .homepage .services-ideas .inner-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}
@media only screen and (max-width: 767px) {
  .homepage .services-ideas .inner-section {
    max-width: 100%;
    width: 100%;
    padding: 0;
  }
}
.homepage .services-ideas .inner-section .services-box {
  max-width: 55%;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .homepage .services-ideas .inner-section .services-box {
    width: 100%;
    max-width: 100%;
    padding: 50px 25px;
  }
}
.homepage .services-ideas .inner-section .services-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 30px;
  color: #FFFFFF;
  font-weight: 200;
  line-height: 33px;
  font-style: normal;
  margin-bottom: 40px;
  text-transform: uppercase;
  position: relative;
}
.homepage .services-ideas .inner-section .services-box ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #FFFFFF;
  font-weight: 400;
  line-height: 19px;
  font-style: normal;
}
.homepage .services-ideas .inner-section .services-box ul li {
  margin-left: 20px;
  margin-bottom: 20px;
  position: relative;
}
.homepage .services-ideas .inner-section .services-box ul li:before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background: #fff;
  margin-right: 10px;
  display: block;
  left: -20px;
  top: 3px;
}
.homepage .services-ideas .inner-section .ideas {
  max-width: 30%;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .homepage .services-ideas .inner-section .ideas {
    position: relative;
    -webkit-clip-path: polygon(0 0, 100% 15%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0% 100%);
    background: #fff;
    padding: 80px 25px 50px 25px;
    max-width: 100%;
    width: 100%;
  }
}
.homepage .services-ideas .inner-section .ideas h2 {
  margin-bottom: 40px;
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .homepage .services-ideas .inner-section .ideas h2 {
    margin-bottom: 20px;
  }
}

.contact-container {
  background-image: url("../img/Group 47.svg");
  background-size: 150px;
  background-repeat: no-repeat;
  background-position: 80% 10%;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .contact-container {
    background: none;
    pverflow: hidden;
  }
}
.contact-container .yellow-bg {
  background: #FFE000;
  -webkit-clip-path: polygon(0 0, 59% 0, 85% 100%, 0% 100%);
  clip-path: polygon(0 0, 59% 0, 85% 100%, 0% 100%);
  min-height: calc(100vh - 80px - 160px);
  position: absolute;
  height: 100%;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  @supports not (clip-path: polygon(0 0, 50% 0, 35% 100%, 0% 100%)) {
    .contact-container .yellow-bg {
      -webkit-background: linear-gradient(55deg, #FFE000 0%, #FFE000 calc(70% + 5px), rgba(76, 79, 173, 0) calc(70% + 5px), rgba(0, 128, 128, 0) 100%);
      -moz-background: linear-gradient(55deg, #FFE000 0%, #FFE000 calc(70% + 5px), rgba(76, 79, 173, 0) calc(70% + 5px), rgba(0, 128, 128, 0) 100%);
      -o-background: linear-gradient(55deg, #FFE000 0%, #FFE000 calc(70% + 5px), rgba(76, 79, 173, 0) calc(70% + 5px), rgba(0, 128, 128, 0) 100%);
      -ms-background: linear-gradient(55deg, #FFE000 0%, #FFE000 calc(70% + 5px), rgba(76, 79, 173, 0) calc(70% + 5px), rgba(0, 128, 128, 0) 100%);
      background: linear-gradient(55deg, #FFE000 0%, #FFE000 calc(70% + 5px), rgba(76, 79, 173, 0) calc(70% + 5px), rgba(0, 128, 128, 0) 100%);
      -webkit-background: gradient(55deg, #FFE000 0%, #FFE000 calc(70% + 5px), rgba(76, 79, 173, 0) calc(70% + 5px), rgba(0, 128, 128, 0) 100%);
      -moz-background: gradient(55deg, #FFE000 0%, #FFE000 calc(70% + 5px), rgba(76, 79, 173, 0) calc(70% + 5px), rgba(0, 128, 128, 0) 100%);
      -o-background: gradient(55deg, #FFE000 0%, #FFE000 calc(70% + 5px), rgba(76, 79, 173, 0) calc(70% + 5px), rgba(0, 128, 128, 0) 100%);
      -ms-background: gradient(55deg, #FFE000 0%, #FFE000 calc(70% + 5px), rgba(76, 79, 173, 0) calc(70% + 5px), rgba(0, 128, 128, 0) 100%);
      background: gradient(55deg, #FFE000 0%, #FFE000 calc(70% + 5px), rgba(76, 79, 173, 0) calc(70% + 5px), rgba(0, 128, 128, 0) 100%);
    }
  }
}
@media only screen and (max-width: 767px) {
  .contact-container .yellow-bg {
    -webkit-clip-path: polygon(0 0, 100% 7%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 7%, 100% 100%, 0% 100%);
    top: 100px;
    height: calc(100% - 100px);
  }
}
.contact-container .yellow-bg .purple-bg {
  background: #4E4EAF;
  width: 100%;
  -webkit-clip-path: polygon(0 0, calc(59% - 5px) 0, calc(85% - 5px) 100%, 0% 100%);
  clip-path: polygon(0 0, calc(59% - 5px) 0, calc(85% - 5px) 100%, 0% 100%);
  min-height: calc(100vh - 80px - 160px);
  padding-top: 90px;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .contact-container .yellow-bg .purple-bg {
    -webkit-clip-path: polygon(0 0, 100% calc(7% + 5px), 100% 100%, 0% 100%);
    clip-path: polygon(0 10px, 100% calc(7% + 10px), 100% 100%, 0% 100%);
  }
}
@media only screen and (min-width: 768px) {
  @supports not (clip-path: polygon(0 0, 50% 0, 35% 100%, 0% 100%)) {
    .contact-container .yellow-bg .purple-bg {
      -webkit-background: linear-gradient(55deg, #4e4eaf 0%, #4e4eaf 70%, rgba(76, 79, 173, 0) 70%, rgba(0, 128, 128, 0) 100%);
      -moz-background: linear-gradient(55deg, #4e4eaf 0%, #4e4eaf 70%, rgba(76, 79, 173, 0) 70%, rgba(0, 128, 128, 0) 100%);
      -o-background: linear-gradient(55deg, #4e4eaf 0%, #4e4eaf 70%, rgba(76, 79, 173, 0) 70%, rgba(0, 128, 128, 0) 100%);
      -ms-background: linear-gradient(55deg, #4e4eaf 0%, #4e4eaf 70%, rgba(76, 79, 173, 0) 70%, rgba(0, 128, 128, 0) 100%);
      background: linear-gradient(55deg, #4e4eaf 0%, #4e4eaf 70%, rgba(76, 79, 173, 0) 70%, rgba(0, 128, 128, 0) 100%);
      -webkit-background: gradient(55deg, #4e4eaf 0%, #4e4eaf 70%, rgba(76, 79, 173, 0) 70%, rgba(0, 128, 128, 0) 100%);
      -moz-background: gradient(55deg, #4e4eaf 0%, #4e4eaf 70%, rgba(76, 79, 173, 0) 70%, rgba(0, 128, 128, 0) 100%);
      -o-background: gradient(55deg, #4e4eaf 0%, #4e4eaf 70%, rgba(76, 79, 173, 0) 70%, rgba(0, 128, 128, 0) 100%);
      -ms-background: gradient(55deg, #4e4eaf 0%, #4e4eaf 70%, rgba(76, 79, 173, 0) 70%, rgba(0, 128, 128, 0) 100%);
      background: gradient(55deg, #4e4eaf 0%, #4e4eaf 70%, rgba(76, 79, 173, 0) 70%, rgba(0, 128, 128, 0) 100%);
    }
  }
}
@media only screen and (max-width: 767px) {
  .contact-container .contact-form {
    padding-top: 30px;
  }
}
.contact-container .contact-form h3 {
  max-width: 1100px;
  width: 1100px;
  margin: 0 auto;
  text-transform: uppercase;
  position: relative;
  padding-top: 55px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #FFE000;
  font-weight: 300;
  line-height: 18px;
  font-style: normal;
}
@media only screen and (max-width: 767px) {
  .contact-container .contact-form h3 {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    color: #000;
    font-weight: 300;
    line-height: 18px;
    font-style: normal;
    width: 100%;
    max-width: 100%;
    padding: 0 25px;
    text-align: right;
  }
}
.contact-container .contact-form h2 {
  max-width: 1100px;
  width: 1100px;
  margin: 0 auto;
  text-transform: uppercase;
  position: relative;
  font-family: "Roboto", sans-serif;
  font-size: 36px;
  color: #FFF;
  font-weight: 300;
  line-height: 38px;
  font-style: normal;
}
@media only screen and (max-width: 767px) {
  .contact-container .contact-form h2 {
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    color: #000;
    font-weight: 300;
    line-height: 28px;
    font-style: normal;
    width: 100%;
    max-width: 100%;
    padding: 0 25px;
    text-align: right;
  }
}
.contact-container .contact-form .inner-section {
  max-width: 1100px;
  width: 1100px;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 90px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-right: calc(1100px * 0.3);
}
@media only screen and (max-width: 767px) {
  .contact-container .contact-form .inner-section {
    width: 100%;
    max-width: 100%;
    padding: 100px 25px 40px 25px;
  }
}
.contact-container .contact-form .inner-section .form-group {
  padding-right: 50px;
}
@media only screen and (max-width: 767px) {
  .contact-container .contact-form .inner-section .form-group {
    padding-right: 0;
  }
}

.solutions .top {
  height: 450px;
  background-image: url("../img/Group 52-min.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .solutions .top {
    background-image: url("../img/services_mobile_top-min.png");
    height: 514px;
  }
}
.solutions .top .title-container {
  width: 1100px;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .solutions .top .title-container {
    width: 100%;
  }
}
.solutions .top .title-container .inner-sections {
  margin-left: 50%;
  width: 50%;
}
@media only screen and (max-width: 767px) {
  .solutions .top .title-container .inner-sections {
    margin-left: 0;
    width: 100%;
  }
}
.solutions .top .title-container .inner-sections .container {
  margin: 0 auto;
  /* width: 70%; */
  padding-top: 139px;
  padding-left: 232px;
}
@media only screen and (max-width: 767px) {
  .solutions .top .title-container .inner-sections .container {
    padding-top: 310px;
    padding-left: 0px;
  }
}
.solutions .top h2.white {
  color: #fff;
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .solutions .top h2.white {
    padding-left: 20px;
  }
}
.solutions .top ul {
  list-style-type: square;
  font-size: 16px;
  font-family: "Roboto";
}
.solutions .top ul li {
  margin-bottom: 14px;
}
@media only screen and (max-width: 767px) {
  .solutions .top ul li {
    margin-bottom: 6px;
  }
}

.potential {
  width: 730px;
  height: 233px;
  margin: 50px auto;
  border: #000000 6px solid;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .potential {
    width: auto;
    height: auto;
    border: 0px;
    margin-top: 20px;
  }
}
.potential .hide1 {
  width: 610px;
  height: 235px;
  background: #fff;
  position: absolute;
  left: 60px;
  top: -6px;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .potential .hide1 {
    display: none;
  }
}
.potential .hide2 {
  width: 736px;
  height: 116px;
  background: #fff;
  position: absolute;
  left: -7px;
  top: 60px;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  .potential .hide2 {
    display: none;
  }
}
.potential .content {
  z-index: 72;
  position: relative;
  padding: 30px 28px;
}
@media only screen and (max-width: 767px) {
  .potential .content {
    padding: 0;
  }
}
.potential .content h2 {
  margin-bottom: 40px;
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .potential .content h2 {
    font-weight: 400;
    padding-left: 0px;
    text-align: center;
    font-size: 26px;
  }
}
.potential .content p {
  margin-top: 0;
  margin-bottom: 1rem;
  display: inline-block;
  padding: 20px;
}
@media only screen and (max-width: 767px) {
  .potential .content p {
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: justify;
  }
}

.bottom {
  height: 450px;
  background-image: url("../img/Group 53-min.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  color: #fff;
  margin-bottom: 3px;
}
@media only screen and (max-width: 767px) {
  .bottom {
    background-image: url("../img/services_mobile_bottom-min.png");
    height: auto;
  }
}
.bottom .inner-div {
  width: 1100px;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .bottom .inner-div {
    width: 100%;
    padding: 20px;
    padding-top: 374px;
  }
}
.bottom .inner-div .left {
  width: 50%;
  padding-right: 30px;
  color: #000;
  padding-top: 38px;
}
@media only screen and (max-width: 767px) {
  .bottom .inner-div .left {
    width: 100%;
    padding: 0;
  }
}
.bottom .inner-div .left .title {
  font-weight: 700;
}

@media only screen and (max-width: 767px) {
  .about {
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
}
.about .top {
  position: relative;
  height: 450px;
  min-height: 450px;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #4E4EAF;
}
@media only screen and (max-width: 767px) {
  .about .top {
    height: auto;
    min-height: auto;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 92%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 92%);
    outline: 1px solid transparent;
  }
}
.about .top .about-bg {
  background-image: url("../img/about.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: cover;
  position: absolute;
  height: 100%;
  min-height: 100%;
  width: 50%;
  top: 0;
  right: 0;
}
@media only screen and (max-width: 767px) {
  .about .top .about-bg {
    background-image: url("../img/about-mob-big.png");
    height: 275px;
    width: 100%;
    min-height: 275px;
    background-position: bottom right;
  }
}
@media only screen and (max-width: 767px) {
  .about .top .inner-section {
    margin-top: 275px;
    height: auto;
    padding-bottom: 60px;
  }
}
.about .inner-section {
  max-width: 1100px;
  width: 1100px;
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .about .inner-section {
    max-width: 100%;
    width: 100%;
    padding: 20px;
  }
}
.about .inner-section .content {
  display: flex;
  flex-direction: column;
}
.about .inner-section .content h3 {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  color: #FFE000;
  font-weight: 400;
  line-height: 30px;
  font-style: normal;
  margin: 0;
  text-transform: uppercase;
}
.about .inner-section .content h2 {
  font-family: "Roboto", sans-serif;
  font-size: 30px;
  color: #FFF;
  font-weight: 200;
  line-height: 36px;
  font-style: normal;
  margin: 0;
}
.about .description-container {
  position: relative;
  max-width: 730px;
  margin: 0 auto;
  padding: 30px 60px;
}
@media only screen and (max-width: 767px) {
  .about .description-container {
    padding: 20px 0;
  }
}
@media only screen and (min-width: 768px) {
  .about .description-container:before {
    content: "";
    position: absolute;
    height: 60px;
    width: 60px;
    border-left: 5px solid #000;
    border-top: 5px solid #000;
    top: 0;
    left: 0;
  }
  .about .description-container:after {
    content: "";
    position: absolute;
    height: 60px;
    width: 60px;
    top: 0;
    right: 0;
    border-right: 5px solid #000;
    border-top: 5px solid #000;
  }
}
.about .description-container .content {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .about .description-container .content:after {
    content: "";
    position: absolute;
    height: 60px;
    width: 60px;
    bottom: -30px;
    right: -60px;
    border-right: 5px solid #000;
    border-bottom: 5px solid #000;
  }
}
.about .description-container .content p {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #000;
  font-weight: 400;
  line-height: 20px;
  font-style: normal;
  margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .about .description-container .content p {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    line-height: 20px;
    font-style: normal;
  }
}

/* Angled edges for the background */

/*# sourceMappingURL=main.css.map */