@charset "UTF-8";
@import url("https://use.typekit.net/ngi2bbw.css");
/* Global Settings */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color:#000000!important;
  font-weight:normal!important;
  font-family: "Poppins",sans-serif;
  background:#fff!important;
  transition: background-color 0.9s ease;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.section.horizontal{ overflow: hidden;}
html {
  scroll-behavior: smooth;
}
#scroller {
	overflow-y: hidden !important;
}
.c-scrollbar {
	opacity: 1;
	background: #DEDEDE;
}
a {
    color: #ec221d;
    text-decoration: none;
}
a:hover {
    color: #000000;
    text-decoration: none;
}
h1 {
  font-size: 3.25rem;
  font-weight: 900;
  transition: color 0.9s ease;
}
h2 {
  transition: color 0.9s ease;
}
h3 {
  font-size: 1.25rem;
}
h2.heading_large {
  font-size: 2.25em;
}
.smalltext {
  font-size: 12px!important;
}
img{max-width: 100%;}
p {
  font-size: 16px;
  color: #000000;
  transition: color 0.9s ease;
}
.p-0 {
  padding: 0 !important;
}
@media only screen and (min-width: 769px) {
section {
 width: 100%;
 /*min-height: 100vh;*/
position: relative;
}
}
.cta {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 5rem;
  margin-left: 25rem;
  color: #121212;
  border: 1px solid #121212;
  transition: color 0.9s ease;
}
@media screen and (max-width: 768px) {
 
  .cta {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 15rem;
    margin-left: 10rem;
  }
}
/*      Night Mode */

progress {
  position: fixed;
  top: 0;
  left: 0;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border: none;
  background: transparent;
  z-index: 1;
}

progress::-webkit-progress-bar {
  background: transparent;
}

progress::-webkit-progress-value {
  background: #121212;
  background-attachment: fixed;
}
progress::-moz-progress-bar {
  background: #121212;
  background-attachment: fixed;
}
/*        Navigation  */
.nav-container {
  position: relative;
  float:right;
  width: 65%;
  right:0px;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* For devices larger than 400px */
@media (min-width: 769px) {
  .container {
    width: 85%;
    padding: 0;
  }
}
/* For devices larger than 550px */
@media (min-width: 550px) {
 /* .container {
    width: 80%;
  }*/
}
/* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */
.nav-container:after {
  content: "";
  display: table;
  clear: both;
}

#navigationWrap {
  display: none;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background: #000000;
  transition: background 0.9s ease;
  opacity: 0;
  position: fixed;
  top: 0;
  padding: 0px 0;
  overflow: hidden;
  z-index: 1;
}
nav ul {
  margin-top: 5rem;
  list-style-type: none;
  padding: 0;
  text-align: center;
}

nav ul li {
  color: #e0e1dd;
  font-size: 3.5rem;
  text-transform: uppercase;
  overflow: hidden;
  font-weight: 700;
}
@media (max-width: 750px) {
  nav ul li {
    font-size: 15vw;
  }
}
nav a {
  color: #e0e1dd;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  text-decoration: none;
}
.navbar {
  position: fixed;
  right: 0;
  margin: 0em 3.9rem;
  color: #121212;
  z-index: 20;
  cursor: pointer;
  padding: .4rem 1rem!important;
}
.navbar .fa, .close .fa{ font-size:34px!important; color:#ec221d!important;}
.close {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: .4rem 1rem!important;
}
.close {
  display: none;
  opacity: 0;
  position: fixed;
  right: 0;
  margin: 0em 3.9rem;
  z-index: 20;
  color: #121212;
  font-weight: 500!important;
  transition: color 0.9s ease;
  cursor: pointer;
}
.social {
  margin-top: 5em;
  justify-content: center;
  text-align: center;
}
.social a {
  align-items: center;
  color: #ffffff;
  color: white;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  text-decoration: none;
}
.social a:hover {
  transition: color 0.9s ease;
  color: #ec221d;
}
.social .fa {
  padding-right: 12px;
  font-size: 1.8em !important;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: #ffffff;
  transition: color 0.9s ease;
}
.social .fa :hover{
  color: #ec221d;
}
/*      Media Queries   */
@media screen and (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
 .menu-toggle {
    margin-top: 1em;
  }
.overlay .close-btn {
    margin-top: 1em;
  }
.menu ul li {
    font-size:6vw;
    padding: 10px 0;
  }
.menu ul li a {
    -webkit-text-stroke: 2px #FFFFFF !important;
    transition: color 0.9s ease;
  }
.night-mode .menu ul li a {
    -webkit-text-stroke: 2px #fcf5f5 !important;
  }
.social .fa {
  padding-right: 10px;
  font-size: 1.2em !important;
 }
}
.menu ul li a {
  color: transparent;
  -webkit-text-stroke: 3px #FFFFFF;
  text-transform: uppercase !important;
}
.night-mode .menu ul li a {
  -webkit-text-stroke: 3px #fcf5f5;
}
.menu ul li a:hover {
  text-decoration: none;
  color: #FFFFFF;
}
.logo {
  position: fixed;
  margin-left: 3.9rem;
  list-style: none;
  z-index: 999;
  opacity:1;
}
.logo a {
  color: #121212;
  transition: color 0.9s ease;
  text-decoration: none;
}
.logo a img{ width:85%; height:auto; opacity:1;}
@media (max-width: 900px) {
  .logo {
    line-height: 3.5rem;
    margin-left: 1rem;
    font-size: 0.6rem;
    letter-spacing: 0.1rem;
  }

  progress {
    display: none;
  }
}
/*      Home  */
.intro{background:url(../images/banner.jpg) no-repeat; background-size:100% 100%; min-height:100vh;}
.main-content{background:#000000; opacity:.9; min-height:100%;}
.intro__content {
  position: relative;
  left: 4%;
  right: 5%;
  top:75px;
  height:100px;
  z-index: 3;
  width:90%;
}
.intro__content2 {
  position:relative;
  left: 5%;
  right: 5%;
  bottom: 15%;
  top:130px;
  z-index: 3;
  width:90%;
}
.intro__title {
  font-size: 13vw!important;
  line-height:1.1;
  overflow: hidden;
  padding-right: 2.3vw;
  color:#FFFFFF;
  margin-top:0px;
  padding:0px;
  position:absolute;
  left:0%;
}
.intro__title2 {
  font-size: 5vw!important;
  line-height:1.1;
  overflow: hidden;
  padding-right: 5.3vw;
  color:#FFFFFF;
  text-align:right;
  margin-top:30px;
}
.intro__txt{position:absolute;
	left:4%;
	width:30%;
	font-size:24px;
	line-height:30px;
	bottom:7%;
}
.intro__txt span{color:#ece831;}

@media screen and (max-width: 768px) {
  #home h1 {
    margin-top: 3rem;
  }
}

/*        About */
.gs_reveal {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
.about-section-home{padding:100px 0; background:#006600;}
.about-img-home{ width:40%; float:left;}
.about-img-home img{height: auto; transition: 0.5s all ease;}
.about-container {
  align-items:center;
  width:100%;
  display: block;
}
.about-content-home {
  width: 60%;
  float: left;
}
.about-container h1{ display:block; width:100%;}
.about-section{padding-bottom:100px;}
.about-container h2{font-size: 1.6rem; line-height: 1.2;}
.about-container h2 span{color:#ece831!important;}

.about-img{ width:50%; float:left; overflow:hidden;}
.about-img img {
  /*object-fit: cover;*/
  height: 500px;
  transition: 0.5s all ease;
}
.about-img:hover img {transform: scale(1.1);}
.about-img .img-fluid{max-width: 100%!important; width:100%!important; border:1px solid #FFFFFF;}
.about-img-home .img-fluid{max-width: 90%!important; width:90%!important; border:1px solid #FFFFFF;}
/*.shadow-lg{
  box-shadow: 0 1rem 3rem rgba(255,255,255,.24) !important;
}*/
.about-content{width:46%; float:left; margin-left:4%; align-items:center;}
.about-content p{font-size: 16px !important; color:#FFFFFF!important;}
/*  Benefit */
.benefit-section{background-size:100% 100%;}
.benefit-main{background:#000000; opacity:.9; width:100%; padding:100px 0;}
.benefit-container {
  display: block;
  width:90%;
  margin:0 auto;
  place-content:center;
  align-items:center;
  
}
.benefit-container h1{place-content:center; text-align:center; font-size: 2.8rem; font-weight:500!important;}
.benefit-container ul{ margin:20px 15px 0;}
.benefit-container ul li{ list-style:none; padding:0px 0 0 35px; margin:20px 20px; font-size:16px; background:url(../images/arrow.png) 0 5px no-repeat;}
/*        Portfolio   */
.portfolio-section {
  background-image: linear-gradient(to bottom right, #ffffff 10%, #eee);
}

.portfolio-container {
  display:block;
  width:100%;
  margin:5rem auto;
  place-content:center;
  align-items:center;
  place-content:center;
  vertical-align:middle;
}
.col-md-5{ float:left;}
.gridsection{
padding-top: 30px;
padding-bottom: 30px;
box-shadow: 10px 10px 15px rgb(0 0 0 / 10%);
background: #fff;
transition: 0.4s;
margin: 10px 40px;
text-align:center;
border-radius: 8px;
border: 1px solid #cccccc;
}
.gridsection .whatwedo{background:url(../images/what-we-do-sm-red.png) 0 2px no-repeat; height:30px; padding-left:40px;}
.gridsection .ourteam{background:url(../images/team-icon-sm-red.png) 0 2px no-repeat; height:30px; padding-left:40px;}
.gridsection .lead{ font-size:16px;}
.portfolio-container h1{place-content:center; text-align:center!important;}

/* contact*/
.contact-section{background:#FFFFFF!important;}
.contact-container{ 
display:block; width:98%; margin:100px auto 0px; padding:0px;
font-size: 14px;
color: #171719;
letter-spacing: 0;
}
.contact-container h1{margin-bottom:25px;}

.contact-left {
  float: left;
  width: 35%;
  height:78vh;
  position:relative;
  background-color:#FFF;
  align-items:center;
  place-content:center;
}
.contact-left-nav {
  float: left;
  width: 35%;
  height:100vh;
  padding-top:100px;
  background-color:#FFFFFF;
}
.contact-left-nav .address-col-nav {
  float: left;
  width:80%;
  padding: 25% 0 20% 0;
  align-item:bottom;
}
.m-left{ margin-left:10%;}
.py-5 {
  padding-bottom: 3rem !important;
}
.pt-5 {
  padding-top: 50px !important;
}
.pt-10 {
  padding-top: 100px !important;
}
.mb-10{
  margin-bottom: 100px !important;
}

.contact-left .address-col {
  float: left;
  width:80%;
  padding: 20% 0 20% 0;
  align-item:bottom;
}
.address-col h3, .address-col-nav h3{
opacity: .5!important;
font-weight: 500;
font-size: 18px;
color: #171719;
display:block;
letter-spacing: 2.33px;
}
.contact-right {
  float: left;
  position:relative;
  width: 65%;
   height:78vh;
  display:block;
  }
.contact-right .map-container{width:98%; position:absolute; bottom:4%; left:0;}
.nav-buttons {
  width: 100%;
  position:absolute;
  bottom: 5.1%;
  left: 0;
}
.nav-buttons-nav {
  width: 100%;
  position:absolute;
  bottom: 0%;
  left: 0;
}
.contact-left-nav a, .contact-left a {
  width: 50%;
  float: left;
} 
a.dark-button {
  box-shadow: inset 0 0 0 #ffffff;
  color: #000;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  padding:10px 0;
  width:230px;
  cursor:pointer;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
  outline:0;
  text-align:center;
  background:#000000;
}
a.dark-button:hover {
  color: #000;
  box-shadow: inset 230px 0 0 0 #e2e2e2;
}

/* Presentational styles */
a.dark-button {
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2.33px;

}
a.light-button {
  box-shadow: inset 0 0 0 #ffffff;
  color: #000;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  padding:10px 0;
  width:230px;
  text-align:center;
  cursor:pointer;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
  outline:0;
  background:#e2e2e2;
}
a.light-button:hover {
  color: #fff;
  box-shadow: inset 230px 0 0 0 #000000;
}

/* Presentational styles */
a.light-button {
  color: #000;
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2.33px;
}

/*        Footer  */

.footer {
  position:relative;
  font-size: 0.6rem;
  bottom:0px;
  padding:0px 0;
  margin:0px;
  height:60px;
  width:100%;
  background:#FFF!important;
  border-top:1px solid #000;
}
.footer__row{display:flex; flex: 0 0 100%; width:100%; height:auto; flex-wrap: wrap; padding-top:7px;}
.footer__logo, .footer__link-wrapper, footer__social-networks{
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  position: relative;
}
.footer__logo {
  justify-content: center;
   -webkit-box-flex: 0;
  -ms-flex: 0 0 10.33333%;
  flex: 0 0 10.33333%;
  max-width: 10.33333%;
  margin-top:4px;
}
.footer__link-wrapper {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 73%;
  width: auto;
	width: 100%;
	padding:10px 0 0;
	font-size:14px;
	place-content:center;
	text-align:center;
}
.footer__social-networks {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 16%;
  width: auto;
  max-width: 100%;
	width: 100%;
  margin-top:13px;
  align-items: right;
}
.footer__social-networks a {
  align-items: center;
  color: #484848;
  color: white;
  padding:0 12px;
  transition: 0.3s;
  text-decoration: none;
}
.footer__social-networks a:hover {
  transition: color 0.9s ease;
  color: #121212;
}
.footer__social-networks .fa {
  font-size: 1.8em !important;
  transition: 0.3s;
  color: #121212;
  transition: color 0.9s ease;
}


.header {
  position:fixed!important;
  top: 0px;
  left: 0;
  width: 100%;
  padding: 15px 0 10px;
  z-index: 999;
  height:75px;
  background:url(../images/headerbg.png) left top no-repeat;
  background-size:100# 100%;
  /*mix-blend-mode: difference;*/
}
.btn-circle {align-items: center;
	position:absolute;
	bottom:0px; right:4%;
	width:auto;
}

/*enquery*/
/*enquery*/
.errormsg{ align-items:center; text-align:center; font-weight:bold; color:#FF0000; font-size:14px; height:20px; margin:0 0 10px 10px; display:block;}
.enquiry-content{ width:50%; margin:0 auto;}
.enquiry-block{display: table;
height: 100%;
width: 100%; padding: 50px 0;}

.form-box{
  height: auto;
  margin-bottom:40px; padding: 0;
font-size: 18px!important;
line-height: 40px;
color: #171719;
width: 100%;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
display: block;
position:relative;
}
.floating-label span{ color:#FF0000;}
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: -15px;
  bottom: 10px;
  left:10px;
  font-size: 11px;
  opacity: 1;
  border:0px;
 
  outline:none;
}
textarea:focus ~ .floating-label,
textarea:not(:focus):valid ~ .floating-label{
  top: -15px;
  bottom: 10px;
  left:10px;
  font-size: 11px;
  opacity: 1;
  border:0px;
 
  outline:none;
}
label span,.floating-label span{ color:#FF0000; font-weight:bold;}
.inputText {
  font-size: 18px!important;
  width: 99%;
  height: 40px;
  padding:15px 0 0 15px;
  border:0px;
  outline:none;
  border:0;
  border-bottom: solid 1px #cccccc!important;
}
.form-box .inputText:focus, .form-box .inputText:active{ border:0px; padding-left:5px;}
.form-box .floating-label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 0px;
  transition: 0.2s ease all;
}
.textareaText {
  font-size: 18px;
  width: 99%;
  height: 100px;
  color:#000000;
  padding:15px 0 0 15px;
  border:0px;
  outline:none;
  border-bottom: solid 1px #cccccc!important;
  display: block;
position:relative;
}
 label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 0px;
  transform: translateY(20px);
  transition: all .5s ease-in-out;
}
textarea:focus + label {
  transform: translateY(-10px);
  font-size:11px;
  }
.submitbtn {
  box-shadow: inset 0 0 0 #000000;
  color: #FFF;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  border:1px solid #000;
  padding:7px 0;
  width:230px;
  cursor:pointer;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
  outline:0;
  background:#000;
}
.submitbtn:hover {
  color: #000;
  box-shadow: inset 230px 0 0 0 #FFFFFF;
}

/* Presentational styles */
.submitbtn {
  color: #FFF;
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 13px;
}
#sendmessage {
    color: green;
    display:block;
	height:50px;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}
#errormessage {
    color: red;
    display:none;
    border:1px solid red;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#sendmessage.show, #errormessage.show, .show {
	display:block;
}
/* gallery*/
.gallery-section{padding-top:100px!important; background:#fff!important;}
.gallery-section h3{ color:#000000; text-align:center; font-size:28px; font-weight:bold; margin-bottom:15px;}	
.gallery-section a.dark-button{margin:15px 0 0 15px!important; padding:10px 5px!important; text-transform:capitalize; font-size:18px!important; letter-spacing: 1.33px; line-height: 1; float:left;}
.gallery-contain {
  max-width: 1240px;
  width:100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: block;
}
.gallery-main{width:100%; position:relative; display:block; float:left;}
.mt-50{ margin:50px 0!important;}
.mb-30{ margin-bottom:30px!important;}
.gallery-main .col-md-3{ float:left;}
.gallery-box {
  width: 100%;
  background: #ffffff;
  border: 1px #000000 solid;
  box-shadow: 0px 0px 10px -5px #000;
  margin-bottom: 0px;
  position: relative;
  z-index: 1;
  padding: 0px 0px;
  overflow: hidden;
}
.gallery-box figure {
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  height: 180px;
  text-align: center;
  cursor: pointer;
}
figure {
  margin: 0rem !important;
}
.gallery-box figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100% !important;
  width:100%;
  object-fit: cover;
  transition: 0.5s all ease;
  -webkit-filter: grayscale(0);
-webkit-transform: scale(1.01);
}
.gallery-box figure:hover img {
-moz-transform:scale(1.1, 1.1);
-ms-transform:scale(1.1, 1.1);
-webkit-transform:scale(1.1, 1.1);
transform:scale(1.1, 1.1);
-webkit-transition:all .8s ease-in-out;}
.gallery-box figure:after{background:#FFF;width:100%;height:100%;position:absolute;left:0;bottom:0;content:'';opacity:0.7;-webkit-transform:skew(45deg) scaleX(0);-ms-transform:skew(45deg) scaleX(0);transform:skew(45deg) scaleX(0);-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.gallery-box figure:hover:after{-webkit-transform:skew(45deg) scaleX(1);-ms-transform:skew(45deg) scaleX(1);transform:skew(45deg) scaleX(1);-moz-transition:all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);-o-transition:all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transition:all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);opacity:0.1;}

.gallery-box div {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height:100%;
  font-weight: 700;
  background: #000000;
  color: #FFFFFF;
  text-align: center;
  opacity: 0.9;
  align-items:center;
  visibility: hidden;
  -webkit-transition: visibility 0s, opacity 0.5s linear;
  transition: visibility 0s, opacity 0.5s linear;
}
/* Hover on Parent Container */
.gallery-box:hover{
    cursor: pointer;
}    

.gallery-box:hover div{
    width: 100%;
    padding: 8px 15px 0px;
    visibility: visible;
    align-items:center;
    opacity: 0.9;
	display:grid;
place-content:center ;
}

#service{background:#000000!important;}
#service p{color:#FFFFFF!important;}
.ipsType_right {
  text-align: right;
}
.ipsType_center {
  text-align: center;
}
.ipsType_justify {
  text-align:justify;
}
.features{margin-top:100px; display:block; width:100%; float:left;}
.cInnerContent {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  position:relative;
  display:block;
}
.ipsSpacer_bottom_double {
  margin-bottom: 30px;
}
.ipsGrid {
  display: inline-block;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.ipsGrid::before, .ipsGrid::after {
  display: table;
  content: "";
  line-height: 0;
}
.ipsGrid > [class*="ipsGrid_span"] {
  display: block;
  width: 100%;
  min-height: 30px;
  box-sizing: border-box;
}
.ipsGrid > .ipsGrid_span5 {
  width: 40.42553191489362%;
}
.ipsGrid > .ipsGrid_span7 {
  width: 57.44680851063829%;
}
.ipsGrid > [class*="ipsGrid_span"] {
  float: left;
  margin-left: 2%;
}
.ipsGrid > [class*="ipsGrid_span"]:first-child {
  margin-left: 0;
}
.feature {
  display: flex;
  align-items: center;
}
.card {
  margin-bottom: 30px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 1px 1px 5px 1px #CCCCCC;
  object-fit: cover;
}
.featured-image-container .card {
  padding: 10px;
  height: auto;
}

.header-section {
  margin: 100px auto .8rem;
  color:#FFFFFF;
  text-transform:capitalize;
}
.white{color:#FFFFFF;}
.center-div{width:70%; display:block; margin:0 auto;}
.center-div h3 span{ color:#ece831;}
@media only screen and (max-width: 768px) {
.logo a img {
    width: 75%;
    height: auto;
}
section{ width: 100%;
 min-height: 50vh;
position: relative;}
.container {
    width: 96%;
    padding: 0;
	margin-left:auto;
	margin-right:auto;
}
.cInnerContent {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: block;
}
h1{font-size: 2.5rem;}
h2{font-size: 2rem;}
h2.heading_large {
  font-size: 1.75rem;
}
h3 {font-size: 1.25rem;}
p {font-size: 15px;}
.smalltext{ font-size:13px!important;}

.ipsGrid_span7 {
    width: 100%!important; margin-left:auto; margin-right:auto;
}
.ipsGrid_span5 {
    width: 100%!important; margin-left:auto; margin-right:auto;
}
.ipsType_justify {
  text-align:center;
}
.footer__logo img {
  max-width: 100%;
 }
.footer__link-wrapper{font-size:10px;}
.footer__social-networks .fa {
    font-size: 1em !important;
}
.footer__social-networks a {
    padding: 0 3px;
}
.navbar {
    margin: 0em 1.50rem;
}
.close {
    margin: 0em 1.50rem;
}
#navigationWrap{height:80vh;}
.contact-left-nav {
  width: 55%;
  height:80vh;
}
.contact-left-nav .address-col-nav {
  width:100%;
  font-size:4vw;
}
.m-left{margin-left: 5%;}
.nav-container {
  width: 45%;
  max-width: 100%;
  padding: 0 7px;
}
/*enquery*/
.enquiry-content{ width:96%; margin:0 auto;}
.submitbtn {
  width:170px;
  margin-left:15px;
}
.submitbtn:hover {
  box-shadow: inset 170px 0 0 0 #FFFFFF;
}
.intro__content {
    top: 90px;
}
.intro__title2 {
    font-size: 7.5vw!important;
}
.intro__txt {
    width: 55%;
    font-size: 16px;
	line-height:22px;
}
.about-img-home, .about-img{ width: 100%; float:none;}
.about-img-home .img-fluid, .about-img .img-fluid {
    max-width: 100%!important;
    width: 100%!important;
}
.about-img img{ height:auto;}
.about-content-home, .about-content {
    width: 90%;
    float: none;
	margin-left:auto;
	margin-right:auto;
}
.benefit-container ul {
    margin: 25px 15px;
}
.benefit-container ul li {
    margin: 25px 15px;
    font-size: 15px;
}
.portfolio-container{ width:85%;}
.portfolio-container p{ font-size:15px!important; text-align:center;}
.gridsection{margin: 10px 0px;}
.contact-left {
    float: left;
    width: 100%;
}
.contact-left .address-col {
    float: left;
    width: 80%;
    padding: 10% 0 20% 0;
}
.contact-right {
    float: left;
    position: relative;
    width: 100%;
}
}
/****** whatsapp chat ****/
#whats-chat{position:fixed;right:2%;bottom:3%;height:auto;width:auto;background:#25D366;padding:10.5px;border-radius:50px; z-index:2;}
#whats-chat:hover{cursor:pointer;box-shadow:2px 2px 15px #ccc;bottom:4%;}

/*===============================*/

#chat-box{position:fixed;right:-500px;bottom:8%;width:250px;height:200px;transition:all .5s; z-index: 9999;}
#chat-top{width:100%;line-height:2;background:rgb(18, 140, 126);color:white;text-align:center;border-radius:5px 5px 0 0;padding:0 10px;}
#chat-msg{background:#ece5dd;padding:8px;border-radius:0 0 5px 5px;box-shadow:0 0 25px -10px #999;}
#chat-msg p{font-size:12px!important; font-weight:700; padding:7px 10px 10px 20px;background:white;border-radius:0 50px 50px 50px;margin-bottom:10px; line-height:17px!important;}
#chat-form{display:flex;}
.chat-in{width:80%;}
#chat-form input{border-radius:5px 0 5px 5px;border:none;outline:none;font-size:14px;padding:5px;line-height:2;}
#send-btn{width:20%;padding: 0 5px;}
#chat-top-right{float:right;padding:5px 0;cursor: pointer;}

#chat-box:after{content:'';
    position: absolute;
    top:58%;
    left: 90%;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
  border-bottom: 25px solid transparent; 
  border-right:25px solid #ece5dd;
  }
@media only screen and (max-width: 500px){
#chat-msg p {
    color: #000!important;
}
}
/**/
:root {
  --black: #000;
  --white: #fff;
  --color-1: #000;
  --gutter: 2rem;
  --replace-offset: 50%;
  --replace-offset-2: calc((100% - var(--replace-offset) ) * -1)
}
.logo--invert {
   background-color: var(--black);
  color: var(--white);
  border-color: var(--white);
}

/**
  This is the interesting part
**/

/* align content above each other without absolute */
.js-replace {
  display: grid;
}

.js-replace__item {
  grid-row: -1 / 1;
  grid-column: -1 / 1; 
  overflow: hidden;
  will-change: transform;
}

/* item to replace with */
.js-replace__item {
  transform: translateY(calc(var(--replace-offset) * 1));  
}
.js-replace__content {
  /* fixes problem with calculating correct height in js */
  border: 1px solid transparent; 
  will-change: transform;

  transform: translateY(calc(var(--replace-offset) * -1));
}

/* previous replace item*/
.js-replace__item--active {
  transform: translateY(calc(var(--replace-offset-2) * 1));  
}
.js-replace__item--active .js-replace__content {
  transform: translateY(calc(var(--replace-offset-2) * -1));  
}


/* REVERSE ANIMATION */
.js-replace--reverse 
.js-replace__item {
  transform: translateY(calc(var(--replace-offset-2) * 1));  
}
.js-replace--reverse 
.js-replace__content {
  transform: translateY(calc(var(--replace-offset-2) * -1));
}

/* previous replace item*/
.js-replace--reverse 
.js-replace__item--active {
  transform: translateY(calc(var(--replace-offset) * 1));  
}
.js-replace--reverse 
.js-replace__item--active .js-replace__content {
  transform: translateY(calc(var(--replace-offset) * -1));
}