@charset "utf-8";
* {
  outline: none;
  margin: 0px;
  padding: 0px;
  border: none;
  text-decoration: none;
  font-family: 'Montserrat';
  box-sizing: border-box;
  font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body {
  text-decoration: none;
  background: #fff;
  font-family: 'Montserrat';
  font-size: 16px;
  color: #000;
  font-weight: normal;
  font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.eot');
    src: url('../fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-Medium.woff2') format('woff2'),
        url('../fonts/Montserrat-Medium.woff') format('woff'),
        url('../fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Thin.eot');
    src: url('../fonts/Montserrat-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-Thin.woff2') format('woff2'),
        url('../fonts/Montserrat-Thin.woff') format('woff'),
        url('../fonts/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.eot');
    src: url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-Regular.woff2') format('woff2'),
        url('../fonts/Montserrat-Regular.woff') format('woff'),
        url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Acrom';
    src: url('../fonts/Acrom-Regular.eot');
    src: url('../fonts/Acrom-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Acrom-Regular.woff2') format('woff2'),
        url('../fonts/Acrom-Regular.woff') format('woff'),
        url('../fonts/Acrom-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Acrom';
    src: url('../fonts/Acrom-Light.eot');
    src: url('../fonts/Acrom-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Acrom-Light.woff2') format('woff2'),
        url('../fonts/Acrom-Light.woff') format('woff'),
        url('../fonts/Acrom-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Billion Reach DEMO';
    src: url('../fonts/BillionReachDEMO.eot');
    src: url('../fonts/BillionReachDEMO.eot?#iefix') format('embedded-opentype'),
        url('../fonts/BillionReachDEMO.woff2') format('woff2'),
        url('../fonts/BillionReachDEMO.woff') format('woff'),
        url('../fonts/BillionReachDEMO.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {scroll-behavior: smooth;}
  .scroll-container {
    position: fixed;
    /*top:0;*/ left:0; width:100%; height:100%;
    overflow:hidden;
  }

  .content {
    position: absolute;
    width:100%;
  }

a {
  text-decoration: none;
  transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}

.banner {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.banner-caption {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
}
.featured-text{
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: 'Acrom';
  font-weight: normal;
  text-transform: uppercase;
  font-size: 1.125em;
   padding-left: 4em;
}
.featured-text-bottom{
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: 'Billion Reach DEMO';
  font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-size: 10.75em;
    position: relative;
  margin-top: -0.5em;
}



.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  transform: rotate(90deg);
}


.sexy-menu.detached .header-contact {
  display: none;
}
video {
  width: 100%;
}
.sexy-menu.detached .tophead {
  display: none;
}

.sexy-menu.detached .nav-brand img {
  margin-top: 20px;
  width: 65%;
}
.sexy-menu.detached .large {
  display: none;
}
.sexy-menu.detached .small {
  display: block;
}

.wh-top {
  margin-right: 15px;
  display: flex;
  align-items: center;
  position: relative;
}
.nav-menu > li > a {
  display: inline-block;
  position: relative;
  color: #000000;
  font-size: 1em;
  font-family: inherit;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  text-transform: uppercase;
  line-height: 35px;
}
.header-phone {
  color: #333 !important;
  padding: 0px 20px;
  display: flex !important;
  letter-spacing: 1px;
  align-items: center;
  margin-right: 0px !important;
  line-height: 36px;
  background-color: rgba(255,255,255,0.8);

}
.header-phone i {
  margin-right: 10px;
}
.top-container{
  width: 100%;
  height: auto;
  padding: 1% 2%;
}

.logo{
  padding-top: 0em;
  width: 12%;
}
.logo img{ width: 100%;}





.nav-menu > li > a:hover {
  color: #fe633b;
}

.sexy-menu.detached .nav-menu > li > a {
  margin: 30px 18px;
  color: #393939;
}
.sexy-menu.detached .nav-menu {
  border-top: 0;
}
.sexy-menu.detached .header-phone {
  margin: 18px 18px !important;
}
.top-quickwraper {
  width: 100%;
  height: auto;
}
.nav-brand img {
  width: 95%;
  margin-top: 8px;
}
.sexy-menu.detached .header-call {
  margin-top: 13px;
}
#button {
  display: inline-block;
  background-color: #333;
  line-height: 50px;
  width: 50px;
  color: #fff;
  height: 50px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button i {
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}
/*popup*/


#popUp {
  position: fixed;
  width: 400px;
  height: auto;
   background:#fff;
  bottom: 8%;
  margin-left: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  z-index: 9999;
  padding: 2% 2% 2%;
  right: 0;
  opacity: 0;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

#popUp .close {
  position: absolute;
  top: -40px;
  opacity: 1;
  left: -4%;
  color: #666;
  font-family: inherit;
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
  background-color: #f7f7f7;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
a.button {
  margin: 0 auto;
  text-align: center;
  right: 0;
  left: 0;
  position: absolute;
  width: 120px;
  font-size: 15px;
  color: #333;
  border-bottom: 2px solid #fff;
  background: #fff;
  padding: 8px 0;
}
#plus {
  color: #fff;
  font-size: 1em;
  margin-right: -425px;
  -webkit-transition: all 1.25s ease;
  -moz-transition: all 1.25s ease;
  -o-transition: all 1.25s ease;
  transition: all 1.25s ease;
  cursor: pointer;
  text-align: left;
  letter-spacing: 1px;
  margin-top: 60px;
}
.side-btn {
  color: #333;
  font-family:inherit;
  font-weight: normal;
  font-size: 1em;
  line-height: 40px;
  display: inline-block;
  padding: 6px 25px;
  letter-spacing: 1px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: all 1.25s ease;
  margin-right: -60px;
  background: #fff;
  border: 2px solid #999;
}
#plus::after {
  display: block;
  display: relative;
}
.mob-txt {
  display: block;
  text-transform: capitalize;
  font-style: normal;
  font-family: inherit;
  font-weight: 500;
}

.side-form .form-group {
  margin-bottom: 12px;
}

.side-form input[type="text"],
.side-form textarea {
  background: #fff;
  color: #3f3f3f;
  width: 100%;
  padding: 15px 20px;
}

.side-form-title {
  font-size: 1.333em;
  color: #fff;
  text-transform: uppercase;
  line-height: 30px;
  font-family: inherit;
  letter-spacing: 1px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
}

/**/

/**/
.clear {
  clear: both;
}
audio,
::selection {
  background: #daa289 !important;
  color: #fff !important;
}
span::selection {
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #fff !important;
  background: #daa289 !important;
}
::-moz-selection {
  color: #fff !important;
}

.grecaptcha-badge {
  display: none !important;
}
.img-full {
  width: 100%;
  height: auto;
  display: block;
}
.img-responsive {
  max-width: 100%;
  height: auto;
}

.sexy-menu.detached .navigation {
  top: 0;
}

.footer-container {
  width: 100%;
  height: auto;
  padding-top: 2em;
  padding-bottom: 2em;
}
.footer-top-for {
  display: flex;
  align-items: center;
}
.footer-top-for img {
  max-width: 35px;
  margin-left: 10px;
}
.top-wraper {
  width: 100%;
  height: auto;
}




/**/

/**/
.form-group {
  margin-bottom: 18px;
}

.enq-container {
  position: relative;
  padding: 60px 0;
  margin-top: -250px;
  z-index: 9;
}

.en-head2 {
  color: #fff;
  font-weight: normal;
  font-family: inherit;
  font-size: 2.29em;
  line-height: 42px;
}
.enq-txt {
  margin-bottom: 30px;
}

/*
*/

/**/


.desk-view {
  display: block;
}
.mob-view {
  display: none !important;
}
.button-outer{
 position: fixed;
  bottom: 42vh;
  right: 0;
  z-index: 9;
}

.whats-app {

  background: #fff;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  color: #ec2d29;
  padding: 0.15em 0.25em;
  border: 2px solid #999;
  margin-top: 1em;
  width: 52px;
  float: right;
}
.whats-app i{ color: #ec2d29}



/************************************************** START LOCATION **************************************************/


.form-title{
  width: 100%;
  height: auto;
  text-align: left;
  color:#081c2c;
  font-size: 2em;
  font-family: 'ES Klarheit Plakat TRIAL';
  font-weight: 900;
    font-style: normal;
    font-display: swap;
}


.enquiry-form-outer{
  width: 100%;
  height: auto;
  float: right;
  position: relative;
  z-index: 2;
  padding-top: 30px;

}

.enquiry-form-outer .user-box {
  position: relative;
  margin-right: 2%;
  width: 49%;
  float: left;
  margin-bottom:15px;
}
.enquiry-form-outer .user-box:nth-child(2n+2){ margin-right: 0%;}


.enquiry-form-outer .user-box input {
  width: 100%;
  padding: 0px 1em;
  font-size:1em;
  color: #333;
  border: none;
  border: 1px solid #d1d1d1;
  outline: none;
  background: #f6f6f6;
  line-height: 45px;
}
.enquiry-form-outer .user-box input:focus ~ label,
.enquiry-form-outer .user-box input:valid ~ label {
  top: -7px;
  left: 0px;
  color: #666;
  font-size: 10px;
  background-color: #f6f6f6;
  padding: 0px 10px;
  line-height: 20px;
  bottom: inherit;
}

.enquiry-form-outer .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 0px 1em;
  font-size: 16px;
  color: #333;
  pointer-events: none;
  transition: .5s;
  bottom: 0;
  line-height: 45px;
  background-color: transparent;
}

.full-field{
  width: 100% !important;
  margin-right: 0% !important;
}

textarea:focus~.floating-label,
textarea:not(:placeholder-shown)~.floating-label,
input:not(:focus):valid~.floating-label {
  top: -7px;
  left: 0px;
  color: #666;
  font-size: 10px;
    background-color: #f6f6f6;
  padding: 0px 10px;
  line-height: 20px;
  bottom: inherit;
}

.scheme-des textarea {
  width: 100%;
  height: 125px;
  resize: none;
  padding: 10px 20px 0 20px;
  font-size: 1em;
  color: #333;
  font-family: inherit;
  font-weight: normal;
  border: 1px solid #d1d1d1;
    background-color: #f6f6f6;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 10px;
  transition: 0.2s ease all;
  color: #999999;
  font-size: 1em;
}





/* active state */
.floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
  width:50%;
}


/* highlighter */
.highlight {
  position:absolute;
  height:50%; 
  width:100%; 
  top:15%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}
.submit-button{
  line-height: 40px;
  padding: 0px 25px;
  background:#333;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  text-transform: uppercase;
  font-size: 1em;

}

/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.hvr-wobble-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
  -webkit-animation-name: hvr-wobble-horizontal;
  animation-name: hvr-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.footer-wraper{
  width: 100%;
  height: auto;
  position: relative;
  float: left;
}
.footer-right-bg{
  width: auto;
  height: auto;
  position: absolute; bottom: 0;
  right: 22%;
}
.footer-left-bg{
  width: auto;
  height: auto;
  position: absolute; bottom: 0;
  left: 38%;
}
.footer-bottom-container{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;
}
.copy-right{
  width: auto;
  font-size: 1em;
  font-family: inherit;
  color: #333;

}
.designed {
  width: auto;
  height: auto;
}
.designed p{
  width: auto;
  font-size: 1em;
  font-family: inherit;
  color: #333;
}
.designed p a{
  width: auto;
  font-size: 1em;
  font-family: inherit;
  color: #333;
}
.designed p a:hover{
  width: auto;
  font-size: 1em;
  font-family: inherit;
  color: #000;
}
.footer-address-container{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 90px;
  padding-bottom: 60px;
  border-top: 1px solid #ccc;
}
.footer-address{
  width: auto;
  height: auto;
}
.btm-link{
  width: auto;
  margin-bottom: 25px;
  height: auto;
  display: flex;
  align-items: flex-start;
}
.btm-link:nth-child(2){ margin-bottom: 0px;}
.icon-bg{ margin-right:25px ; line-height: 1.7;}
.btm-link p{ font-family: inherit; line-height: 1.7; color: #333;}
.footer-social-links{
  width: auto;
  height: auto;
}
.footer-social-links ul{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
.footer-social-links ul li{
  font-size: 1.25em;
  color: #333;
  margin-right: 15px;
  float: left;

}
.footer-social-links ul li:last-child{ margin-right: 0px;}
.footer-social-links ul li a{
  font-size: 1em;
  color: #333;
}
.footer-social-links ul li a:hover{
  font-size: 1em;
  color: #000;
}
.profile-finish{
  width: 100%;
  height: auto;
  position: relative;
  padding-top: 120px;
  padding-bottom: 75px;
}
.profile-finish-right-bg{
  width: auto;
  height: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.profile-finish-left-bg{
  width: auto;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
   z-index: -1;
}
.title{
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 2.375em;
  color: #333;
  font-family: 'Acrom';
   font-weight: 300;
    font-style: normal;
    font-display: swap;
}
.profile-finish p{ text-align: center; font-family: inherit; line-height: 1.7;}
.profile-finishes{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  padding-top:35px;
  flex-wrap: wrap;
  align-content: stretch;
}
.profile-finishes-for{
  width: auto;
  height: auto;
}
.profile-finishes-for-design{
  width: 100%;
  height: auto;
  margin-bottom: 0.5em;
  overflow: hidden;
}
.profile-finishes-for-name{
  width: 100%;
  height: auto;
  text-align: left;
  font-family: inherit;
  font-size: 0.8em;
}
.profile-spec-wrap{
  width: 100%;
  height: auto;
}


.profile-spec-container{
  width: 100%;
  height: auto;
  box-shadow: 
    0 -10px 20px rgba(0,0,0,0.05),  /* soft glow on top */
    0  10px 20px rgba(0,0,0,0.05); 
              background-color: #fff;
              margin-top: 1.5em;
              position: relative;

}

.profile-spec-right-bg{
  width: auto;
  height: auto;
  position: absolute;
  right: 0;
  bottom: -80px;
  z-index: -1;
}
.profile-spec-left-bg{
  width: auto;
  height: auto;
  position: absolute;
  left: 0;
  bottom: -80px;
   z-index: -1;
}
.profile-spec-container .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: stretch;
}
.profile-for{
  width: 16.6%;
  height: auto;
  display: flex;
  justify-content: center;
  border-right: 1px solid #ccc;
  padding: 60px 0px;
}
.profile-for:last-child{ border-right: 0px;}
.profile-content{
  width: 100%;
  height: auto;
}
.profile-content-pic{
  width: 100%;
  height: auto;
  text-align: center;
}
.profile-content-dtl{
  width: 100%;
  height: auto;
  margin-top: 40px;
  font-family: inherit;
  font-size: 0.875em;
  text-align: center;
  color: #333;

}
.space-purpose{
  width: 100%;
  height: auto;
  padding: 90px 0px;
  position: relative;
}
.space-porpose-outer{
  width: 100%;
  height: auto;
  padding: 0px 15%;
}
.space-porpose-content{
  width: 100%;
  height: auto;
  position: relative;
  background-color: #EFEFEF;
  padding: 50px 42px;

}
.space-porpose-content p{
  font-size: 0.95em;
  color: #333;
  font-family: inherit;
  line-height: 1.7;
}
/*.space-porpose-content .title{ color: #fff;} */
.space-right{
  width: auto;
  height: auto;
  position: absolute;
  right: -118px;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  z-index: -9;
}
.space-left{
  width: auto;
  height: auto;
  position: absolute;
  left: -68px;
  bottom: -45px;
  margin: auto;
  display: flex;
  align-items: center;
  z-index: -9;
}
.space-content-bg{
  width: auto;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  margin: auto;
}
.product-wrap{
  width: 100%;
  height: auto;
  padding-top: 110px;
  position: relative;
}
.product-bg{
  width: auto;
  height: auto;
  position: absolute;
  right: 0px;
  bottom: 20%;
  z-index: -1;
}
.product-top-bg{
  width: auto;
  height: auto;
  position: absolute;
  left: 014%;
  top: 0%;
  z-index: -1;
}
.product-container {
  width: 100%;
  height: auto;
  position: relative;
  padding-top:35px;
}
.home-course-pic{
  width: 100%;
  height: auto;
  overflow: hidden;
}
.product-name{
    position: relative;
  left:40px ;
  top:-15px ;
  background-color: #fff;
  line-height: 30px;
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  font-size: 0.95em;
  font-family: inherit;
  text-transform: uppercase;
  z-index: 999;
  float: left;
  padding: 0px 15px;
}
#gallery-slider li:nth-child(even) {
    margin-top: 40px;
}
.header-for{
  width: 100%;
  height: 65px;
  z-index: 9;
  display: flex;
  justify-content: space-between; /* pushes left & right */
  align-items: center;            /* vertical center */
  position: relative;
}





  .tabs-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /* Left content */
  .tab-content {
    background: #f9f9f9;
    width: 59.5%;
  }
  .tab-content img {
    width: 100%;
    height: 100%;
  }

  /* Right side (tabs) */
  .tab-buttons {
    padding: 30px 100px;
    /*background: url(../images/tab-dtl-bg.jpg) no-repeat;*/
    width: 40%;
    background-size: 100% 100%;
    border: 1px solid #ccc;
    position: relative;
  }
  .tab-topbg{
    width: 100%;
    height: auto;
    position: absolute;
    left: 0px;
    top: 0;
    opacity: 0.5;
  }
  .tab-bottombg{
     width: 100%;
    height: auto;
    position: absolute;
    left: 0px;
    bottom: 0;
    opacity: 0.5;
    z-index: -1;
  }

  .tab-buttons h2 {
    font-size:4em;
    margin-bottom: 10px;
    font-family: 'Acrom';
    text-align: center;
    font-weight: 300;
  }

  .tab-buttons p {
    font-size:1em;
    margin-bottom: 20px;
    color: #444;
    text-align: center;
    line-height: 1.7;
    font-family: inherit;
  }

  .tab-buttons button {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    color: #333;
    padding: 6px 0;
    transition: color 0.3s;
    width: 50%;
  float: left;
  font-family: inherit;
  line-height: 1.7;
  }
  .tab-buttons button.active {
    color: red;
    font-weight: bold;
    text-decoration: underline;
  }

  /* Responsive for mobile */
  @media (max-width: 768px) {
    .tabs-container {
      flex-direction: column;
    }
    .tab-buttons {
      order: -1;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }
    .tab-buttons button {
      margin: 5px 10px;
    }
  }
  .main-wrap{
    width: 100%;
    height: auto;
    padding-top: 105px;
    position: relative;
  }
  .main-wrap-left-bg{
    width: auto;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
  }
    .main-wrap-right-bg{
    width: auto;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
  }
  .common-tab-pic{
    width: 100%;
    height: auto;
    text-align: center;
    padding: 60px 0px;
  }

.banner-bottom-container{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 15%;
}
.banner-bottom-dtl{
  width: 43%;
  height: auto;
}
.banner-bottom-dtl ul{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
.banner-bottom-dtl ul li{
  font-size: 1.25em;
  color: #6d6d6d;
  font-family: 'Acrom';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #ccc;
  line-height: 2.5;

}
.banner-bottom-dtl ul li:last-child{ border: 0px;}
.banner-btm-pic{
  width: auto;
  height: auto;
  max-width: 45%;
}
.banner-btm-pic img{ max-width: 100%;}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}


    /* Popup background */
.popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* ensure on top */
}

  /* Popup box */
  .popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 300px;
    position: relative;
  }





  /* Close button style */
  .close-btn {
    position: absolute;
    top: -8px; right: -8px;
    font-size: 18px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }


@media (min-width: 1023px) and (max-width: 1279px) {
  body {
    font-size: 13px !important;
  }
  .container {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
  }

  .nav-brand img {
    width: 56%;
    margin-top: 12px;
  }
  .nav-menu > li > a {
    margin: 25px 10px;
  }
  .sexy-menu.detached .nav-brand img {
    margin-top: 11px;
    width: 45%;
  }
  .header-phone {
    padding: 8px 20px;
    margin: 16px 7px !important;
  }
  .banner-caption-outer {
  width: auto;
  height: auto;
  text-align: right;
  padding-bottom: 8em;
  padding-right: 4.5em;
}
  .sexy-menu.detached .nav-menu > li > a {
    margin: 18px 10px;
  }
  .sexy-menu.detached .header-phone {
    margin: 10px 10px !important;
  }
  #button {
    height: 40px;
    width: 40px;
    line-height: 40px;
    right: 15px;
  }
 



  .footer-menu-brdr {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .footer-menu li {
    margin-right: 15px;
  }
  .footer-address-container {
    padding-bottom: 15px;
    padding-top: 50px;
  }

}

@media (min-width: 1280px) and (max-width: 1359px) {
  body {
    font-size: 14px !important;
  }
  .container {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }

  .nav-brand img {
    width: 70%;
    margin-top: 12px;
  }
  .nav-menu > li > a {
    margin: 28px 12px;
  }
  .sexy-menu.detached .nav-brand img {
    margin-top: 11px;
    width: 55%;
  }
  .header-phone {
    padding: 6px 20px;
    margin: 16px 7px !important;
  }
  .sexy-menu.detached .nav-menu > li > a {
    margin: 18px 10px;
  }
  .sexy-menu.detached .header-phone {
    margin: 13px 10px !important;
  }
  #button {
    height: 40px;
    width: 40px;
    line-height: 40px;
    right: 15px;
  }
 



  .footer-menu-brdr {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .footer-menu li {
    margin-right: 15px;
  }
  .footer-address-container {
    padding-bottom: 15px;
    padding-top: 50px;
  }
  .banner-caption-outer{ padding-right: 6em;}

}

@media (min-width: 1360px) and (max-width: 1399px) {
  body{
    font-size: 14px !important;
  }
  .container {
    width: 100%;
    padding-left: 6%;
    padding-right: 6%;
  }
  .nav-brand img {
    width: 70%;
    margin-top: 12px;
  }
  .nav-menu > li > a {
    margin: 28px 12px;
  }
  .sexy-menu.detached .nav-brand img {
    margin-top: 11px;
    width: 55%;
  }
  .header-phone {
    margin: 20px 7px !important;
  }
  .sexy-menu.detached .nav-menu > li > a {
    margin: 18px 10px;
  }
  .sexy-menu.detached .header-phone {
    margin: 13px 10px !important;
  }
  #button {
    height: 40px;
    width: 40px;
    line-height: 40px;
    right: 15px;
  }
  


  .footer-menu-brdr {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .footer-menu li {
    margin-right: 15px;
  }
  .footer-address-container {
    padding-bottom: 25px;
    padding-top: 50px;
  }
  .banner-caption-outer{ padding-right: 6em;}

}

@media (min-width: 1400px) and (max-width: 1441px) {
  body {
    font-size: 15px !important;
  }
 
  .container {
    width: 100%;
    padding-left: 6%;
    padding-right: 6%;
  }

  .nav-brand img {
    width: 70%;
    margin-top: 12px;
  }
  .nav-menu > li > a {
    margin: 28px 12px;
  }
  .sexy-menu.detached .nav-brand img {
    margin-top: 11px;
    width: 55%;
  }
  .header-phone {
    margin: 20px 7px !important;
  }
  .banner-caption-outer{ padding-right: 6em;}
  .sexy-menu.detached .nav-menu > li > a {
    margin: 18px 10px;
  }
  .sexy-menu.detached .header-phone {
    margin: 13px 10px !important;
  }
  #button {
    height: 40px;
    width: 40px;
    line-height: 40px;
    right: 15px;
  }

  


  .footer-menu-brdr {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .footer-menu li {
    margin-right: 15px;
  }
  .footer-address-container {
    padding-bottom: 25px;
    padding-top: 50px;
  }

}
@media (min-width: 1441px) and (max-width: 1599px) {
  li,
  body {
    font-size: 15px !important;
  }
  .container {
    width: 100%;
    padding-left: 6%;
    padding-right: 6%;
  }

  .nav-brand img {
    width: 70%;
    margin-top: 12px;
  }
  .nav-menu > li > a {
    margin: 28px 12px;
  }
  .sexy-menu.detached .nav-brand img {
    margin-top: 11px;
    width: 55%;
  }
  .header-phone {
    padding: 6px 10px;
    margin: 20px 7px !important;
  }
  .sexy-menu.detached .nav-menu > li > a {
    margin: 18px 10px;
  }
  .sexy-menu.detached .header-phone {
    margin: 13px 10px !important;
  }
  #button {
    height: 40px;
    width: 40px;
    line-height: 40px;
    right: 15px;
  }



  .footer-menu-brdr {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .footer-menu li {
    margin-right: 15px;
  }
  .footer-address-container {
    padding-bottom: 25px;
    padding-top: 50px;
  }

}
@media (min-width: 1600px) and (max-width: 1680px) {
  body {
    font-size: 15px !important;
  }


  .nav-brand img {
    width: 88%;
  }
  .container {
    width: 100%;
    padding-left: 8%;
    padding-right: 8%;
  }

  #button {
    height: 40px;
    width: 40px;
    line-height: 40px;
  }
}
@media (min-width: 1681px) {
  body {
    font-size: 16px !important;
  }
  .container {
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
  }
}

@media (max-width: 420px) {
  body,
  li {
    font-size: 14px !important;
  }
  p {
    font-size: 1em;
    line-height: 1.7;
  }
  .container {
    padding-left: 3%;
    padding-right: 3%;
  }
  .nav-brand img {
    width: 95%;
    margin: 0px auto;
  }
  .sexy-menu {
    height: 75px;
  }
  .whats-app {
    width: 40px;
    right: 0px;
  }
  .footer-address-container {
    display: none;
  }
  .hero-text-area {
    font-size: 8px;
    bottom: 20px;
    top: unset;
  }
  .featured-text {
    line-height: 30px;
  }
  .mob-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-left: 4px;
    line-height: 18px;
  }

  .side-btn span {
    display: none;
  }
  .side-form .form-group {
    margin-bottom: 8px;
  }

  #popUp {
    width: 350px;
    padding: 4% 5% 4%;
    bottom: 13%;
  }
  .b-content {
    text-align: center;
  }


  .copy-right span{ display: none;}
  .profile-finishes-for {width: 48%;margin-bottom: 1em;}
  .profile-spec-container .container{ display: block;}
  .profile-for{ width: 100%; border-right: none; border-bottom: 1px solid #ccc; padding: 20px 0px;}
  .space-porpose-outer{ padding: 0px 2%;}
  .space-porpose-content{ padding: 10px 10px;}
  .tab-content{ width: 100%;}
  .tab-buttons{ width: 100%; padding: 20px 20px;}
  .tab-buttons button{ width: 42%;}
  .common-tab-pic{ display: none;}
  .page-hero { height: 100vh !important;  }
  .header-phone{ display: none !important;}
  .logo {width: auto;}

  .banner-bottom-container{ display: block;}
  .banner-bottom-dtl{ width: 100%;}
  .banner-btm-pic{ max-width: 100%; margin-top: 1.5em;}
    .banner-btm-pic img{ max-width: 100%;}




}
@media (min-width: 421px) and (max-width: 460px) {
  body,
  li {
    font-size: 14px !important;
  }
  p {
    line-height: 1.8;
    font-size: 1em;
  }
  .container {
    padding-left: 3%;
    padding-right: 3%;
  }
  .nav-brand img {
    width: 83%;
    margin: 0px auto;
  }
  .sexy-menu {
    height: 73px;
  }
  .whats-app {
    width: 40px;
  }
  .footer-address-container {
    display: block;
  }

  #popUp {
    width: 300px;
    padding: 4% 5% 4%;
    bottom: 13%;
  }
  .copy-right span{ display: none;}
  .profile-finishes-for {width: 48%;margin-bottom: 1em;}
  .profile-spec-container .container{ display: block;}
  .profile-for{ width: 100%; border-right: none; border-bottom: 1px solid #ccc; padding: 20px 0px;}
  .space-porpose-outer{ padding: 0px 2%;}
  .space-porpose-content{ padding: 10px 10px;}
  .tab-content{ width: 100%;}
  .tab-buttons{ width: 100%; padding: 20px 20px;}
  .tab-buttons button{ width: 42%;}
  .common-tab-pic{ display: none;}
  .page-hero { height: 100vh !important;  }
  .header-phone{ display: none !important;}
  .logo {width: auto;}

  .banner-bottom-container{ display: block;}
  .banner-bottom-dtl{ width: 100%;}
  .banner-btm-pic{ max-width: 100%; margin-top: 1.5em;}
    .banner-btm-pic img{ max-width: 100%;}

 
}
@media (min-width: 461px) and (max-width: 560px) {
  body,
  li {
    font-size: 14px !important;
  }
  .container {
    padding-left: 3%;
    padding-right: 3%;
  }
  p {
    line-height: 1.8;
    font-size: 1em;
  }
  .nav-brand img {
    width: 75%;
    margin: 0px auto;
  }
  .sexy-menu {
    height: 73px;
  }
  .whats-app {
    width: 40px;
  }

  #popUp {
    width: 300px;
    padding: 4% 5% 4%;
    bottom: 13%;
  }
  .copy-right span{ display: none;}
  .profile-finishes-for {width: 48%;margin-bottom: 1em;}
  .profile-for{ width: 48%;  border-bottom: 1px solid #ccc; padding: 20px 5px;}
   .profile-for:nth-child(2n+2){ border-right: 0px;}
  .space-porpose-outer{ padding: 0px 2%;}
  .space-porpose-content{ padding: 10px 10px;}
  .tab-content{ width: 100%;}
  .tab-buttons{ width: 100%; padding: 20px 20px;}
  .tab-buttons button{ width: 42%;}
  .common-tab-pic{ display: none;}
  .page-hero { height: 100vh !important;  }
  .header-phone{ display: none !important;}
  .logo {width: auto;}

  .banner-bottom-container{ display: block;}
  .banner-bottom-dtl{ width: 100%;}
  .banner-btm-pic{ max-width: 100%; margin-top: 1.5em;}
    .banner-btm-pic img{ max-width: 100%;}
  
}
@media (min-width: 561px) and (max-width: 680px) {
  body,
  li {
    font-size: 14px !important;
  }

  .mob-view.home-img {
    display: none !important;
  }
  p {
    line-height: 1.8;
    font-size: 1em;
  }
  .container {
    padding-left: 3%;
    padding-right: 3%;
  }
  .nav-brand img {
    width: 65%;
    margin: 0px auto;
  }
  .sexy-menu {
    height: 73px;
  }
  .whats-app {
    width: 40px;
  }
  .footer-address-container {
    display: block;
  }

  #popUp {
    width: 300px;
    padding: 4% 3% 4%;
    bottom: 13%;
  }
  .profile-finishes-for {width: 32%;margin-bottom: 1em;}
  .profile-for{ width: 48%;  border-bottom: 1px solid #ccc; padding: 20px 5px;}
   .profile-for:nth-child(2n+2){ border-right: 0px;}
  .space-porpose-outer{ padding: 0px 2%;}
  .space-porpose-content{ padding: 10px 10px;}
  .tab-content{ width: 100%;}
  .tab-buttons{ width: 100%; padding: 20px 20px;}
  .tab-buttons button{ width: 42%;}
  .common-tab-pic{ display: none;}
  .page-hero { height: 100vh !important;  }
  .header-phone{ display: none !important;}
  .logo {width: auto;}

  .banner-bottom-container{ display: block;}
  .banner-bottom-dtl{ width: 100%;}
  .banner-btm-pic{ max-width: 100%; margin-top: 1.5em;}
    .banner-btm-pic img{ max-width: 100%;}
 
}
@media (min-width: 681px) and (max-width: 768px) {
  body,
  li {
    font-size: 14px !important;
  }
  .container {
    padding-left: 3%;
    padding-right: 3%;
  }
  .profile-finishes-for {width: 25%;margin-bottom: 1em;}
  .profile-for{ width: 32%;  border-bottom: 1px solid #ccc; padding: 20px 5px;}
   .profile-for:nth-child(2n+2){ border-right: 1px;}
    .profile-for:nth-child(3n+3){ border-right: 0px;}
  .space-porpose-outer{ padding: 0px 2%;}
  .space-porpose-content{ padding: 10px 10px;}
  .tab-content{ width: 100%;}
  .tab-buttons{ width: 100%; padding: 20px 20px;}
  .tab-buttons button{ width: 42%;}
  .common-tab-pic{ display: none;}
  .page-hero { height: 100vh !important;  }
  .header-phone{ display: none !important;}
  .logo {width: auto;}
  .banner-btm-pic img{ max-width: 100%;}

}

@media (max-width: 768px) {
  .side-form-title {
    margin-bottom: 7px;
  }


  .sexy-menu.detached .header-phone {
    margin: 0 !important;
  }


  .header-contact {
    display: none;
  }
  
  .nav-brand img {
    display: flex;
    align-items: center;
  }
  body.home .logo {
    transform: translate(-50%, 0%);
    left: 50%;
  }
  body.home .logo {
    right: unset;
  }


  .desk-view {
    display: none !important;
  }
  .mob-view {
    display: block !important;
    width: 100%;
  }

  .nav-menu > li > a {
    color: #fff !important;
  }

  .nav-toggle,
  .navigation-hidden .nav-header {
    display: block !important;
  }


  .sexy-menu.detached .header-phone a {
    margin: 12px 20px !important;
  }
}

@media (min-width: 769px) and (max-width: 991px) {
  body {
    font-size: 14px !important;
  }
  .container {
    width: 100%;
    padding-left: 3%;
    padding-right: 3%;
  }

  .nav-brand img {
    width: 46%;
    margin-top: 5px;
  }
  .nav-menu > li > a {
    margin: 20px 11px;
    font-size: 0.67em;
  }
  .header-phone {
    margin: 18px 5px !important;
  }
  .sexy-menu.detached .nav-menu > li > a {
    margin: 17px 10px;
  }
  .sexy-menu.detached .nav-brand img {
    margin-top: 6px;
    width: 40%;
  }
  .sexy-menu.detached .header-phone {
    margin: 15px 0px !important;
  }
  .hero-text-area {
    font-size: 8px;
    left: 7%;
  }
  .featured-text {
    line-height: 30px;
  }

  .side-form .form-group {
    margin-bottom: 8px;
  }
  .banner-btm-pic img{ max-width: 100%;}
}
@media (min-width: 992px) and (max-width: 1022px) {
  body{
    font-size: 14px !important;
  }
  .container {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
  }
  .nav-brand img {
    width: 56%;
    margin-top: 4px;
  }
  .nav-menu > li > a {
    margin: 25px 10px;
    font-size: 0.9em;
  }
  .sexy-menu.detached .nav-brand img {
    margin-top: 2px;
    width: 45%;
  }
  .header-phone {
    margin-top: 22px !important;
  }
  .sexy-menu.detached .nav-menu > li > a {
    margin: 18px 10px;
  }
  .sexy-menu.detached .header-phone {
    margin: 16px 10px !important;
  }
  #button {
    height: 40px;
    width: 40px;
    line-height: 40px;
    right: 15px;
  }
  .whats-app {
    right: 0;
  }
  .whats-app img {
    width: 45px;
  }
  .hero-text-area {
    font-size: 10px;
  }
  .featured-text {
    line-height: 33px;
  }

  .side-form .form-group {
    margin-bottom: 8px;
  }
  #popUp {
    width: 350px;
  }
  .banner-btm-pic img{ max-width: 100%;}
}
@media (max-width: 992px) {
  #button {
    display: none;
  }
    .side-btn {
   display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.5em;
  
   background:#fff;
    color: #333;
    transform: unset;
    padding: 0.05em 0.25em;
    width: auto !important;
    line-height: 52px;
    width: 52px !important;
    text-align: center;
  }
  #plus { margin-top: 0px;}
  .side-form .specialised-title{ color: #fff;}

  .logo{ top: 0.5em !important;}
  .sexy-menu.detached{ position: inherit !important;}
  .footer-address-container{ display: block;}
  .footer-address{ margin-bottom: 1.5em;}
  .main-wrap{ padding-top: 30px;}
  .profile-finish{ padding-top: 60px;}
  .footer-address-container{ padding-top: 60px;}
  .space-purpose{ padding: 60px 0px;}
  .tab-buttons h2{ font-size: 3em;}
  .banner-caption{ justify-content: center; padding-top: 10em;}
  .title{ font-size: 2em;}
  .featured-text-bottom{ font-size: 9em;}
  .featured-text{ font-size: 1em;}
  .smooth-scroll-wrapper{ position: inherit !important; transform:none !important; }
  .logo{ padding-top: 0px; top:  inherit !important;}
   body.home .logo {text-align: center;  }
   .logo img {width: 75%;margin: 0 auto;}
     .scroll-container {
    position: inherit;
    /*top:0;*/ left:0; width:100%; height:auto;
  }

  .content {
    position: inherit;
    width:100%;
  }
  .banner-btm-pic img{ max-width: 100%;}
}