html {
  height: 100vh;
  scroll-behavior: smooth;}

body {
  height: 100%;
  font-family: 'Roboto', sans-serif;
  color: #080708; }

.btn {
  border-radius: 10px;
  border: none;
  text-decoration: none;
  color: #fff;
  background-color: rgb(39, 39, 39);
  padding: 13px 30px;
  font-size: 20px;}
  .btn:hover{
  background-color: rgb(66, 66, 66);
  text-decoration: none;}

.section {
  padding: 100px 0;
  position: relative; }
  .section.guide {
    background-image: linear-gradient(to right, rgba(98, 255, 255, 0.73), rgba(255, 36, 120, 2.73)), url(../images/steps/steps_bg.png);
    display: table;
    clear: both;
    width: 100%;}
  .section.contact {
    background-color: #ddd; }
  .section.services {
    background: #000;
    color: #fff; }
    .section.services svg {
      position: absolute;
      bottom: -180px;
      z-index: 1; }
      .section.services svg path {
        fill: #f1f1f1; }
  .section.products {
    background: #f5f5f5; }

.section-head {
  padding: 1.125rem 0;
  line-height: 1; }
  .section-head .section-highlight {
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ea3457;
    letter-spacing: 2px;
    margin-bottom: 0.25rem; }
  .section-head .section-title {
    font-size: 42px;
    font-weight: 700;
    color: inherit;
    text-transform: uppercase; }

.about-wrapper {
  display: flex;
  position: relative;
  align-items: center; }
  .about-wrapper .about-img img {
    border-radius: 30px;
    width: 400px; }
  .about-wrapper .para {
    padding: 0 1.5rem; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1375px;
  margin: 0 auto;
  height: 150px; }
  header ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0; }
    header ul li a {
      color: #fff;
      font-size: 1.5rem;
      line-height: 30px;
      font-weight: 500;
      text-decoration: none;
      padding: 10px 20px; }

.main {
  height: 900px;
  width: 100%;
  background-image: url(http://exqute.egemenerd.com/wp-content/uploads/2019/01/slide1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative; }
  .main_overlay {
    position: relative;
    height: 900px;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(87deg, rgba(234, 52, 87, 0.8) 0, rgba(96, 46, 117, 0.9) 100%); }
  .main_content {
    text-align: center;
    width: 100%;
    padding: 180px 40px;
    max-width: 840px;
    margin: 0 auto;
    color: #fff; }
    .main_content h1 {
      font-size: 4.2rem;
      margin: 0; }
    .main_content p {
      font-size: 1.25rem;
      margin: 1rem 0; }

.card {
  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.15);
  border: none;
  text-align: center; }
  .card.card-relative {
    position: relative;
    margin: 50px 20px;
    box-shadow: 0px 10px 15px 0px rgba(199, 199, 199, 0.15);
    border-radius: 5%; }
    .card.card-relative .card-img-top {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 200px;
      margin: 0;
      right: -100px;
      z-index: 1;
      bottom: -100px; }
  .card .card-head {
    padding: 2.5rem 1.25rem 0; }
  .card .card-img-top {
    width: 100px;
    margin: 0 auto; }
  .card .card-body .card-title {
    font-size: 28px;
    font-weight: 600; }
  .card .card-body .card-text {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8; }

.color-selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin: 0 auto;
  position: relative; }
  .color-selection .color-select {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: #ddd;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 300;
    padding: 1rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin: 0.25rem;
    border-radius: 3px; }
    .color-selection .color-select.on-color-focus {
      align-items: flex-start;
      justify-content: flex-start;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
      border-radius: 3px;
      transition: all 0.2s ease;
      border: none; }
      .color-selection .color-select.on-color-focus span {
        height: 64px;
        width: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        background-color: #000;
        position: absolute;
        right: 1rem;
        top: 1rem;
        font-size: xx-large;
        cursor: pointer;
        color: #fff; }
      .color-selection .color-select.on-color-focus p {
        background-color: #000;
        padding: 0.5rem 1rem;
        font-size: xx-large;
        color: #fff;
        margin-bottom: 0; }
    .color-selection .color-select:hover {
      cursor: pointer; }

  .site-footer
  {
    background: linear-gradient(87deg, rgba(234, 52, 87, 0.8) 0, rgba(96, 46, 117, 0.9) 100%); 
    padding:45px 0 20px;
    font-size:15px;
    line-height:24px;
    color:#ffffff;
  }
  .site-footer hr
  {
    border-top-color:#bbb;
    opacity:0.5
  }
  .site-footer hr.small
  {
    margin:20px 0
  }
  .site-footer h6
  {
    color:#fff;
    font-size:16px;
    text-transform:uppercase;
    margin-top:5px;
    letter-spacing:2px
  }
  .site-footer a
  {
    color:#737373;
  }
  .site-footer a:hover
  {
    color:#3366cc;
    text-decoration:none;
  }
  .footer-links
  {
    padding-left:0;
    list-style:none
  }
  .footer-links li
  {
    display:block
  }
  .footer-links a
  {
    color:#737373
  }
  .footer-links a:active,.footer-links a:focus,.footer-links a:hover
  {
    color:#3366cc;
    text-decoration:none;
  }
  .footer-links.inline li
  {
    display:inline-block
  }
  .site-footer .social-icons
  {
    text-align:right
  }
  .site-footer .social-icons a
  {
    width:40px;
    height:40px;
    line-height:40px;
    margin-left:6px;
    margin-right:0;
    border-radius:100%;
    background-color:#fff
  }
  .copyright-text
  {
    margin:0
  }
  @media (max-width:991px)
  {
    .site-footer [class^=col-]
    {
      margin-bottom:30px
    }
  }
  @media (max-width:767px)
  {
    .site-footer
    {
      padding-bottom:0
    }
    .site-footer .copyright-text,.site-footer .social-icons
    {
      text-align:center
    }
  }
  .social-icons
  {
    padding-left:0;
    margin-bottom:0;
    list-style:none
  }
  .social-icons li
  {
    display:inline-block;
    margin-bottom:4px
  }
  .social-icons li.title
  {
    margin-right:15px;
    text-transform:uppercase;
    color:#96a2b2;
    font-weight:700;
    font-size:13px
  }
  .social-icons a{
    background-color:#eceeef;
    color:#818a91;
    font-size:16px;
    display:inline-block;
    line-height:44px;
    width:44px;
    height:44px;
    text-align:center;
    margin-right:8px;
    border-radius:100%;
    -webkit-transition:all .2s linear;
    -o-transition:all .2s linear;
    transition:all .2s linear
  }
  .social-icons a:active,.social-icons a:focus,.social-icons a:hover
  {
    color:#fff;
    background-color:#29aafe
  }
  .social-icons.size-sm a
  {
    line-height:34px;
    height:34px;
    width:34px;
    font-size:14px
  }
  .social-icons a.facebook:hover
  {
    background-color:#3b5998
  }
  .social-icons a.twitter:hover
  {
    background-color:#db4444
  }
  @media (max-width:767px)
  {
    .social-icons li.title
    {
      display:block;
      margin-right:0;
      font-weight:600
    }
  }

.social-btn {
  display: block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 1rem;
  background: #fff;
  text-align: center;
  border-radius: 100%;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  color: #080708;
  margin: 0 0.5rem; }
  .social-btn:hover {
    color: #ea3457; }

.service-card {
  display: flex;
  align-items: center;
  justify-content: center; }
  .service-card .service-info {
    width: 50%;
    padding: 2.5rem 1.5rem; }
    .service-card .service-info .service-title {
      font-size: 28px;
      font-weight: 600;
      text-transform: uppercase; }
    .service-card .service-info .service-desc {
      font-size: 17px;
      font-weight: 300;
      line-height: 1.8; }
  .service-card .card-img-top {
    padding: 0 1.5rem;
    width: 40%; }
  .service-card--reverse {
    flex-direction: row-reverse; }
  .service-card.pull-up {
    position: relative;
    top: -100px; }
  .service-card.pull-up-2 {
    position: relative;
    top: -200px; }

.howto-card {
  background-color: #fff;
  padding: 1rem;
  border-radius: 10px 110px 110px 10px;
  display: flex;
  align-items: center;
  max-width: 600px; }
  .howto-card .howto-step {
    font-size: 3rem;
    font-weight: 600;
    padding: 0 1rem; }
  .howto-card .howto-info {
    flex-grow: 1;
    padding: 1rem; }
    .howto-card .howto-info-title {
      font-size: 1.5rem;
      font-weight: bold;
      text-transform: uppercase; }
    .howto-card .howto-info-desc {
      font-weight: 300; }
  .howto-card .howto-image img {
    width: 100px; }
  .howto-card + .howto-card {
    margin-top: 30px; }
  .howto-card.reverse {
    flex-direction: row-reverse;
    border-radius: 110px 10px 10px 110px;
    text-align: right; }

.howto-titanium {
      display: flex;
      align-items: center;
      justify-content: center;}
      .howto-titanium .titanium-info {
        width: 100%;
        padding: 2.5rem 1.5rem; }
        .howto-titanium .titanium-info .titanium-title {
          font-size: 28px;
          font-weight: 600;
          text-transform: uppercase; }
        .howto-titanium .titanium-info .titanium-desc {
          font-size: 17px;
          font-weight: 300;
          line-height: 1.8; 
          color: #fff;}
      .howto-titanium .card-img-top {
        padding: 0 1.5rem;
        width: 40%; }
      .howto-titanium--reverse {
        flex-direction: row-reverse; }
      .howto-titanium.pull-up {
        position: relative;
        top: -100px; }
      .howto-titanium.pull-up-2 {
        position: relative;
        top: -200px; }

    .column {
      float: left;
      width: 50%;
    }
    .row {
      display: flex;
    }
    
    .column {
      flex: 50%;
    }
.google-map{
  width: 100%;
}