@font-face {
  font-family: 'GRIFTER';
  src: url('../fonts/GRIFTERBold.eot');
  src: url('../fonts/GRIFTERBold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/GRIFTERBold.woff2') format('woff2'),
      url('../fonts/GRIFTERBold.woff') format('woff'),
      url('../fonts/GRIFTERBold.svg#GRIFTERBold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Bold.eot');
  src: url('../fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/ProximaNova-Bold.woff2') format('woff2'),
      url('../fonts/ProximaNova-Bold.woff') format('woff'),
      url('../fonts/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('ProximaNova-Black.eot');
  src: url('ProximaNova-Black.eot?#iefix') format('embedded-opentype'),
      url('ProximaNova-Black.woff2') format('woff2'),
      url('ProximaNova-Black.woff') format('woff'),
      url('ProximaNova-Black.svg#ProximaNova-Black') format('svg');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: 'Proxima Nova Lt';
  src: url('../fonts/ProximaNova-Light.eot');
  src: url('../fonts/ProximaNova-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/ProximaNova-Light.woff2') format('woff2'),
      url('../fonts/ProximaNova-Light.woff') format('woff'),
      url('../fonts/ProximaNova-Light.svg#ProximaNova-Light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Extrabld.eot');
  src: url('../fonts/ProximaNova-Extrabld.eot?#iefix') format('embedded-opentype'),
      url('../fonts/ProximaNova-Extrabld.woff2') format('woff2'),
      url('../fonts/ProximaNova-Extrabld.woff') format('woff'),
      url('../fonts/ProximaNova-Extrabld.svg#ProximaNova-Extrabld') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

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


* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
body {
  margin: 0px;
  background: #fff url('../images/background-pattern.png')repeat;
  font-weight: 400;
  font-size: 16px;
  color: #232323;
  line-height: 1;
  font-family: 'Proxima Nova';
}
a, button {
  transition: all 500ms ease-in-out;
}
a,
a:hover,
a:focus {
  outline: none;
  text-decoration: none;
}
button:focus,
input:focus {
  outline: none !important;
  box-shadow: inherit !important;
  
}
ul {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}

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


.container {
  max-width: 1230px;
  width: 100%;
}

.btn {
  font-family: 'GRIFTER';
  border-radius: 10px;
  padding:18px 22px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  box-shadow: 0px 7px 0px rgb(0 0 0 / 10%);
  position: relative;
  transition: all 500ms ease-in-out;
}
.btn .right-icon {
  margin-left: 10px;
  transition: all 500ms ease-in-out;
}
.btn-primary {
  background: #EA552B;
  border:1px solid #EA552B;
  color: #000000; 
}
.btn-secondary {
  background: #000000;
  border:1px solid #000000;
  color: #ffffff; 
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  background: #da5029;
  color: #000000;
  border:1px solid #da5029;
  outline: none;
  box-shadow: 0px 5px 0px rgb(0 0 0 / 10%);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
  background: #EA552B;
  color: #000000;
  border:1px solid #EA552B;
  outline: none;
  box-shadow: 0px 5px 0px rgb(0 0 0 / 10%);
}
.btn-primary:active, .btn-secondary:active{
  top: 7px;
  box-shadow: 0px 0px 0px rgb(0 0 0 / 0%);
}
.btn-secondary-outline {
  border: 1px solid #1C1C1C;
  background-color: transparent;
  color: #1C1C1C;
}
.btn-secondary-outline:hover,
.btn-secondary-outline:focus {
  border: 1px solid #EA552B;
  background: #EA552B;
  color: #000000;
  outline: none;
  box-shadow: inherit;
} 
h1 {
  font-family: 'GRIFTER';
  font-style: normal;
  font-weight: bold;
  font-size: 38px;
  line-height: 50px;
  letter-spacing: 0.02em;
  color: #000000;
}

h2 {
  font-family: 'GRIFTER';
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
  line-height: 46px;
  letter-spacing: 0.02em;
  color: #000000;
}

h3 {
  font-family: 'GRIFTER';
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 27px;
  letter-spacing: 0.02em;
  color: #000000;
}
h4 {
  font-family: 'GRIFTER';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  color: #000000;
}
h5 {
  font-family: 'GRIFTER';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  color: #000000;
}

p {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #232323;
  opacity: 0.8;
}

.lightCyanBg {
  background: #D9F8FF;
}
.lightOrangeBg {
  background: #FFECDD;
}
.lightPurple {
  background: #E0E3FF;
}
.skyBlue {
  background: #99E6FF;
}
.lightPink {
  background: #FFE8F9;
}
.honeydewBg{
  background: #E9D8E6;
}
.main {
  padding-top: 82px;
  position: relative;
}
/* .main::after {
  content: "";
  top: 0; 
  height: 112px;
} */
/********** HEADER ****************/

.headerMain {
  display: block;
  width: 100%;
  background: #FBE8DE url(../images/background-pattern.png) repeat;
  padding:10px 0; 
  position: absolute;
  width: 100%;
  top: 0; 
  left: 0;
  z-index: 1000; 
  transition: all 500ms ease-in-out;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.sticky .headerMain {
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
  background: #fff;
  position: fixed;
  animation: header-sticky 0.8s linear;
} 
@keyframes header-sticky {
  0% {
    transform: translateY(-150px);
  }
  100% {
    transform: translateY(0);
  }
}
.headerInner {
  display: flex;
  align-items: center;
  padding: 0;
}
.headerInner .logo {
  margin-right: auto;
}
.headerInner .logo a {
  display: block;
}
.headerInner .logo a img {
  max-width: 100%;
}

.menuRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.menuRow .menu {
  margin: 0px;
  display: flex;
}
.mobileMenuBtn {
  display: none;
}
.menuRow li {
  list-style: outside none none;
  margin: 0 18px;
  padding: 0;
  display: inline-flex;
}
.menuRow a {
  font-family: 'GRIFTER';
  position: relative;
  text-decoration: none;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #010101;
  padding:0;
  transition: all 500ms ease-in-out;
  text-transform: uppercase;
}
.menuRow a:after{
  content: "";
  width: 0;
  height: 2px;
  background: #EA552B;
  position: absolute;
  bottom: -35px;
  left: 0;
  display: inline-block;
  transition: all ease 0.5s;
}
.menuRow li:hover a:after,
.menuRow a:focus:after,
.menuRow li.active a:after {
  width: 100%;
}


/*** LIGHT HEADER CSS END **/
.headBtn {
  padding-left: 18px;
} 
.headUnlock {
  margin-left: 34px;
  height: 24px;
  width: 24px;
  flex: 0 0 24px;
  max-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.headUnlock img {
  display: block;
}
/*** Home Banner Slider **/
.hmBanner {
  display: block;
  position: relative;
  width: 100%;
  padding: 56px 0 0px;
  background: #FBE8DE url(../images/background-pattern.png) repeat;
  border-bottom: 20px solid #000;
}
.hmBanner:before, .innerBanner:before{
  content: '';
  background: url('../images/banner-vector1.png') no-repeat;
  width: 150px;
  height: 150px;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 250px;
}
.hmBanner:after, .innerBanner:after{
  content: '';
  background: url('../images/banner-vector2.png') no-repeat;
  width: 115px;
  height: 350px;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 100px;
}
.innerBanner:before{
  top: 100px;
}
.bannerInner {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
  z-index: 10; 
}
.bannerContent {
  width: 1030px;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 0 0 56px;
}
.bannerContent h2 {
  font-style: normal;
  font-size: 16px;
  line-height: 23px;
  letter-spacing: 0.02em;
  color: #000000;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  width: 800px;
  max-width: 100%;
}
.bannerContent h1 span {
  color: #EA552B;
  display: block;
}
.bannerContent h1 {
  margin: 16px 0;
}
.bannerContent p {
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #232323;
  opacity: 0.8;
  max-width: 500px;
  margin-bottom: 30px;
}
.casestudyslider{
  margin-top: 60px;
}
.casestudy-img {
  padding: 0 8px;
  height: auto;
  overflow: hidden;
}
.casestudy-img img{
  width: 100%;
}

/********** HOME SERVICES CSS **********/
.hmServices{
  background: #fff url('../images/background-pattern.png') repeat;
  padding-top: 100px;
}
.hmServicesInnerRow {
  display: flex;
  align-items: center;
  margin: 0 -15px;
  flex-wrap: wrap;
  margin-bottom: 73px;
  position: relative;
}
.hmServicesInnerRow:last-child {
  margin-bottom: 0;
}

.hmServicesInnerContent {
  max-width: 50%;
  width: 50%;
  flex: 0 0 50%;
  padding: 0 15px;
}
.hmServicesInnerRow:first-child .hmServicesInnerImg {
  margin-top: 60px;
}
.hmServicesInnerImg {
  max-width: 50%;
  width: 50%;
  flex: 0 0 50%;
  padding: 0 15px;
  text-align: right;
}
.pageTitle{
  text-align: center;
  margin-bottom: 70px;
}
.pageTitle h2 {
  margin-bottom: 5px;
}
.pageTitle p {
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: 640px;
  max-width: 100%;
} 
.hmServicesInner .pageTitle  {
  margin-bottom: 40px;
  text-align: center;
  width: 495px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
} 

.hmServicesList {
  max-width: 506px; 
}
.hmServicesList .hmServicesListRow {
  border-radius: 10px;
  padding:24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 446px;
  height: 94px;
  margin-bottom: 50px;
  position: relative;
}
.hmServicesList .hmServicesListRow:hover {
  box-shadow: 0 0px 10px -2px rgba(0, 0, 0, 0.2);
}
.hmServicesListRow h3 {
  margin-bottom: 0;
}
.hmServicesListRow::after {
  content: "";
  position: absolute;
  bottom: -107px;
  left: 0;
  width: 48px;
  height: 105px;
  background: url(../images/services-border-arrow-img.svg) center no-repeat;
}
.hmServicesListRow:last-child {
  margin-bottom:0px;
}
.hmServicesListRow:nth-child(even)::after {
  right: 0;
  left: inherit;
  background: url(../images/services-border-arrow-img-right.svg) center no-repeat;
}
.hmServicesListRow:last-child::after {
  display: none;
}
.hmServicesListRow:nth-child(even) {
  margin-left: 60px;
}
.hmServicesListRow.text-left  {
  justify-content: inherit;
}  
.hmServicesListRow.text-left h3 {
  padding-left: 24px;
} 
.hmServicesInnerRow:nth-child(odd) .hmServicesInnerImg img {
   margin-right: -26px;
}
.hmServicesInnerRow:nth-child(odd) {
  flex-direction: row-reverse;
}
.hmServicesInnerRow:nth-child(odd) .hmServicesInnerImg  {
  text-align: left;
}
.hmServicesInnerRow:nth-child(odd) .hmServicesInnerImg img {
  margin-left: -26px;
}
.hmServicesInnerRow:nth-child(odd) .hmServicesInnerContent .hmServicesList {
   margin-left: auto;
}


 
.pattern-images  {
  content: "";
  position: absolute;
  bottom: -160px;
  left: auto;
  width: 100%;
  margin: 0 0;
  right: auto;
  z-index: -1;
  padding-left: 26px;
  text-align: center;
}
.hmServicesInnerRow:last-child::after {
  display: none;
}


/********* ABOUT *********/
.hmAbout {
  padding:73px 0 128px;
  overflow: hidden;
}
.hmAboutInner {
  display: flex;
  align-items: center;
  margin: 0 -15px;
  flex-wrap: wrap;
}
.hmAboutContent {
  max-width: 50%;
  flex: 0 0 50%;
  width: 50%;
  padding: 0 15px;
}
.hmAboutImg {
  width: 50%;
  max-width: 50%;
  flex: 0 0 50%;
  padding: 0 15px;
}
.hmAboutContent h2 {
  margin-bottom: 30px;
}
.hmAboutContent p {
max-width: 551px;
margin-bottom: 30px;
}
.hmAboutContent p:last-child {
  margin-bottom: 0;
}
.aboutImg {
  position: relative;
  text-align: right;
  height: 490px;
  width: 490px;
  margin-left: auto;
  margin-left: 53px;
}
.aboutIconImg {
  position: absolute;
  top: 0;
  left: 0; 
  width: 100%;
  height: 100%;
  -webkit-animation: rotate 9s normal linear infinite;
  animation: rotate 9s normal linear infinite;
}
.aboutIconImg .about-icon {
  width: 91px;
  height: 91px;
  right: 0;
  border-radius: 50%;
  position: absolute; 
  box-shadow: 0px 15px 40px -2px rgba(0, 0, 0, 0.1);  
}
.aboutIconImg .about-icon.html-icon {
  top: -20px;
  right: 30px;
}
.aboutIconImg .about-icon.wordpress-icon {
  top: 110px;
  right: -45px;
}
.aboutIconImg .about-icon.woo-icon { 
  bottom: 134px;
  right: -53px;
}
.aboutIconImg .about-icon.w-icon {
  bottom: -8px;
  right: 30px;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, 270deg);
    transform: rotate3d(0, 0, 1, 270deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

/********* Our Portfolio *********/
.hmOurPortfolio {
  background: #fff9f3;
  padding: 100px 0;
}
.hmPortfolioCol h2 {
  margin-bottom: 30px;
}
.hmPortfolioCol p {
max-width: 551px;
margin-bottom: 30px;
}
.hmPortfolioCol p:last-child {
  margin-bottom: 0;
}
.hmPortfolioInner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.hmPortfolioCol {
  width: 50%;
  max-width: 50%;
  flex: 0 0 50%;
  padding: 0 15px;
  margin-bottom: 40px;
} 
.hmPortfolioCol .portfolio-link {
  border-radius: 10px;
  overflow: hidden;
  display: block;
}
.hmPortfolioCol .portfolio-link img {
  max-width: 100%;
  width: 100%;
  display: block;
  transition: all 0.5s ease-in-out;
}
.hmPortfolioCol .portfolio-link:hover img {
  transform: scale(1.05);
}
/********* Testimonial *********/
.hmtestimonial {
  padding: 190px 0 165px;
  overflow: hidden;
}

.hmtestimonialInnerSlid {
  position: relative;
  background: #FFFCF7;
  border-radius: 20px;
  padding:70px 100px 100px;
  max-width: 1020px;
    margin: 0 auto;
}
.hmtestimonialInnerSlid::after {
  content: "";
  position: absolute;
  top: 0;
  left:0px;
  background: url(../images/testimonial-top-left-bg.png) center no-repeat;
  width: 124px;
  height: 124px;
}
.hmtestimonialInnerSlid::before {
  content: "";
  position: absolute;
  bottom: 0;
  right:0px;
  background: url(../images/testimonial-bottom-right-bg.png) center no-repeat;
  width: 124px;
  height: 124px;
}
.hmtestimonialTitle {
  width: 100%;
  text-align: center;
  margin-bottom: 70px;
}
.hmtestimonialInnerBg {
  position: relative;
}
.hmtestimonialInnerBg::after {
  content: "";
  position: absolute;
  top: 95px;
  right: 125px;
  background: url(../images/testimonial-bg.png) center no-repeat;
  width: 110px;
  height: 41px;
}
.hmtestimonialSlidRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.hmtestimonialSlidImg {
  padding: 0 15px;
  width: 220px;
  position: relative;
}
.hmtestimonialSlidImg::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 40px;
  background: url(../images/testimonial-img-bg.png) center no-repeat;
  width: 20px;
  height: 30px;
}
.hmtestimonialSlidImg::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 23px;
  background: url(../images/testimonial-img-bg.png) center no-repeat;
  width: 20px;
  height: 30px;
}
.hmtestimonialSlidContent {
  padding: 0 15px;
  flex: 1 1 auto;
  width: calc(100% - 220px);
}
.hmtestimonialSlidImg img {
  width: 100%;
  border-radius: 50%;
}

.testimonialSlidText p {
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0.02em;
  color: #000000;
  margin-bottom: 34px;
  max-width: 598px;
}
.testimonialProfileName {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.testimonialProfileNameTitle {
  padding: 0 15px;
}
.testimonialProfileNameTitle h3 {
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0.02em;
  color: #000000;
  margin-bottom: 6px;
}
.testimonialProfileNameTitle p {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #7A7A7A;
  margin-bottom: 0;
}
.testimonialProfileRetting {
  display: flex;
  align-items: center;
  padding: 0 15px;
}
.testimonialProfileRetting span {
  padding:0 4px;
  display: block;
}


.hmtestimonial .slick-prev,
.hmtestimonial .slick-next {
display: none !important;
}

.hmtestimonial .slick-dots {
  display: inline-flex;
  align-items: center;
  width: 100%;
  margin: 28px auto 0;
  max-width: 190px;
  justify-content: center;
}
.hmtestimonial .slick-dots li {
  background: #EA552B;
  border: none;
  height: 12px;
  width: 12px;
  display: block;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
}

.hmtestimonial .slick-dots li button {
  background: transparent;
  font-size: 0;
  height: 8px;
  width: 8px;
  border: 1.5px solid transparent;
  border-radius: 50%;
}

.hmtestimonial .slick-dots li.slick-active button {
  border: 1.5px solid #fff;
  background: #EA552B;
}

.hmtestimonialInner {
  position: relative;
}

.hmtestimonialtop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.hmtestimonialtop img{
  width: 108px;
  height: 108px;
  border-radius: 50%;
}

.hmtestimonial .OneImg {
  left: -72px;
  top: -15px;
}
.hmtestimonial .twoImg {
  top: inherit;
  bottom: 80px;
}
.hmtestimonial .threeImg {
  left: 330px;
  top: -70px;
}
.hmtestimonial .fourImg {
  top: inherit;
  bottom: -60px;
  left: 490px;
}
.hmtestimonial .fiveImg {
  left: inherit;
  right: -39px;
  top: -35px;
}
.hmtestimonial .sixImg {
  left: inherit;
  right: 40px;
  top: inherit;
  bottom: 135px;
}

/***********************************************
Any Project Section CSS START
***********************************************/
.anyProject{
  margin-top: 100px;
}
.anyProject .anyProjectInner{
  background: #FBE8DE url(../images/background-pattern.png) repeat;
  padding: 80px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  position: relative;
}
.anyProject .anyProjectInner:before, .form-all:before{
  content: '';
  background: url('../images/banner-vector3.png') no-repeat;
  width: 170px;
  height: 109px;
  position: absolute;
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
  background-size: cover;
}
.anyProject .anyProjectInner:after, .form-all:after{
  content: '';
  background: url('../images/banner-vector2.png') no-repeat;
  width: 215px;
  height: 360px;
  position: absolute;
  right: -60px;
  top: -70px;
  background-size: contain;
}
.anyProjectContent{
  padding: 0 15px;
  width: 100%;
}
.anyProjectContent h2 {
  margin-bottom: 10px;
}
.anyProjectContent p {
  margin-bottom: 40px;
  width: 645px;
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 32px;
}

.anyProjectImg {
  text-align: right;
}
/***********************************************
Any Project Section CSS END
***********************************************/

/***********************************************
Process Section CSS START
***********************************************/
.how-process{
  background: #E1EAF4 url(../images/background-pattern.png) repeat;
  margin-top: 86px;
  padding: 90px 0 160px 0;
}
.how-process h3{
  padding: 30px 0 10px 0;
  margin: 0;
  font-size: 18px;
}
.how-process .process-icon{
  height: 80px;
}
.how-process .text-center::before{
  content: '';
  background: url('../images/arrow.svg') no-repeat;
  width: 130px;
  height: 110px;
  position: absolute;
  display: inline-block;
  bottom: -60px;
  right: -50px;
}
.how-process .text-center:first-child::before{
  transform: scaleY(-1);
}
.how-process .text-center:nth-child(2)::before{
  top: 10px;
  bottom: inherit;
}
.how-process .text-center:nth-child(3)::before{
  display: none;
}

/***********************************************
Why we different Section CSS START
***********************************************/
.what-we-offer{
  padding-top: 80px;
}
.what-we-offer .monthly{
  background: #F5E3D9;
  padding: 38px 50px;
}
.what-we-offer .monthly h3{
  font-size: 22px;
  text-align: center;
  margin-bottom: 10px;
}
.what-we-offer .monthly p{
  opacity: 1;
  font-weight: 400;
  text-align: center;
  margin: 0;
}
.what-we-offer .monthly h4{
  font-size: 30px;
  margin-top: 26px;
  margin-bottom: 0;
  text-align: center;
}
.what-we-offer .monthly p.spot-left span{
  font-family: 'Proxima Nova';
  font-size: 14px;
  padding: 2px 10px;
  color: #010101;
  background-color: #da5029;
  border-radius: 3px;
  font-weight: 600;
}
.what-we-offer .monthly .feature-included{
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 20px 0;
  margin-top: 26px;
}
.what-we-offer .monthly .feature-included p{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 15px;
  display: inline-block;
}
.what-we-offer .monthly ul li{
  font-size: 14px;
  margin-bottom: 9px;
  position: relative;
  padding-left: 10px;
}
.what-we-offer .monthly ul li::before{
  content: '';
  width: 4px;
  height: 4px;
  background: #232323;
  border-radius: 50px;
  display: inline-block;
  left: 0;
  position: absolute;
  top: 4px;
}
.what-we-offer .monthly .btn-primary{
  width: 100%;
}
.what-we-offer .offer{
  background: #D8E1EA;
  padding: 50px 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.what-we-offer .offer:last-child{
  margin-top: 30px;
}
.what-we-offer .offer-detail{
  padding: 25px 40px 25px 0;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.what-we-offer .offer-detail p{
  margin: 0;
}
/***********************************************
Why we different Section CSS START
***********************************************/


/***********************************************
Why we different Section CSS START
***********************************************/
.why-we-different{
  padding-top: 110px;
}
.why-we-different .image-icon{
  margin-bottom: 20px;
  height: 80px;
}
.why-we-different .col-md-6{
  margin-top: 60px;
}
.why-we-different .pageTitle{
  margin-bottom: 0;
}
.why-we-different h3{
  font-size: 18px;
}
/***********************************************
Why we different Section CSS END
***********************************************/


/***********************************************
Process Section CSS END
***********************************************/

/***********************************************
SERVICES PAGE CSS START
***********************************************/
.innerBanner {
  background: #FBE8DE url('../images/background-pattern.png') repeat;
  padding: 135px 0;
  
}
.innerTitle {
  width: 100%;
  text-align: center;
  position: relative;
}
.innerTitle p {
  width: 774px;
  max-width: 100%;
  font-family: 'GRIFTER';
  opacity: 1;
  margin: 0 auto;
}


.servicesSection {
  padding: 120px 0 0px;
}
.servicesSectionInner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.servicesCardItem {
  width: 33.33%;
  flex: 0 0 33.33%;
  max-width: 33.33%;
  padding: 0 15px;
  margin-bottom: 30px;
}

.servicesCardCol {
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
  border-radius: 10px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 472px;
  z-index: 1;
}
.servicesCardCol::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 25%;
  background: #F7BAA4;
  filter: blur(100px);
  opacity: 0.7;
  z-index: -1;
}

.servicesCardItem:nth-child(even) .servicesCardCol::after {
  background: #A1D3B0;
}

.servicesCardItemIcon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 64px;
  position: relative;
}

.servicesCardItemIcon span {
  background: #FFFFFF;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  height: 82px;
  width: 82px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
}
.centerBg::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  background: url(../images/services-center-arrow.svg) center no-repeat;
  width: 100%;
  height: 99px;
  transform: translate(0, -50%);
  left: 0;
}

.servicesCardItemContent h3 {
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 0.02em;
  margin-bottom: 9px;
}
.servicesCardItemContent p {
  margin-bottom: 0;
}
  
.servicesCardItemBtn {
  margin-top: 25px;
}



/***********************************************
SERVICES PAGE CSS END
***********************************************/


/***********************************************
About PAGE CSS Start
***********************************************/
.aboutSection {
  padding: 120px 0;
}
.aboutSectionInner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.aboutSectionContent,
.aboutSectionImage {
  width: 50%;
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 15px;
}
.aboutSectionImage {
  text-align: right;
}
.aboutSectionContent h2 {
margin-bottom: 30px;
width: 472px;
max-width: 100%;
font-size: 26px;
line-height: 36px;
}
.aboutSectionContent p {
  margin-bottom: 30px;
  max-width: 551px;
}
.aboutSectionContent p:last-child {
  margin-bottom: 0;
}

.aboutStorySection {
  background: #fff9f3;
  padding: 94px 0 99px;
  overflow: hidden;
}
.aboutStoryInner {
  display: flex;
  align-items: center; 
}
.aboutStoryInnerContent  {
  width: 534px;
  max-width: 534px;
  flex: 0 1 534px; 
  padding-right: 30px;
  margin-right: auto;
}
 .aboutStoryInnerImage {
  width: 516px;
  max-width: 516px;
  flex: 0 1 516px; 
  margin-left: auto;
}

.aboutStoryInnerContent h2 {
margin-bottom: 30px;
}
.aboutStoryInnerContent h3 {
  margin: 9px 0 26px 0;
}
.aboutStoryInnerContent p {
  margin-bottom: 26px;
  max-width: 496px;
}
.aboutStoryInnerContent p:last-child {
  margin-bottom: 0px;
}
.stroy-thumb-image {
  height: 466px;
  width: 466px;
  margin: 0 25px 0 auto;
  position: relative;
}
.stroy-thumb-image .stroy-icon-thumb {
  position: absolute;
  top: -56px;
  left: -56px;
  height: 578px;
  width: 578px;
  -webkit-animation: rotate 9s normal linear infinite;
  animation: rotate 9s normal linear infinite;
}
.aboutStoryInnerContent .aboutStoryWrap {
  padding-bottom: 67px;
}
.aboutStoryWrap .slick-arrow {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  font-size: 0;
  z-index: 2;
}
.aboutStoryWrap .slick-arrow.slick-prev {
  background: url(../images/slid-icon.svg) left no-repeat;
  height:36px;
  width: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  transform: scale(1) rotate(180deg);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.aboutStoryWrap .slick-arrow.slick-next {
  background: url(../images/slid-icon.svg) left no-repeat;
  height: 36px;
  width: 36px;
  left: 57px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.aboutStoryWrap .slick-arrow.slick-next:hover {
  transform: scale(1.4);
}
.aboutStoryWrap .slick-arrow.slick-prev:hover {
  transform: scale(1.4) rotate(180deg);
}

.theTeamSection {
  padding: 120px 0;
}

.teamSliderRow {
  margin-top: 80px;
  position: relative;
}
.teamWrap {
  position: relative;
}
.teamWrap {
  position: relative;
}
.teamWrap::before {
  content: "";
  position: absolute;
  top: 0;
  left:120px;
  background: url(../images/inner-right-bg-img.png) center no-repeat;
  width: 165px;
  height: 100px;
  z-index: -1;
  opacity: 0.5;
}
.teamWrap::after {
  content: "";
  position: absolute;
  bottom: 30px;
  right: 190px;
  background: url(../images/team-right-bg.png) center no-repeat;
  width: 175px;
  height: 175px; 
  z-index: -1;
  opacity: 0.5;
}
.teamSliderRow::after {
  content: "";
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  width: 100%;
  height: 419px;
  background: url(../images/team-bg.svg) center no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: -1;
}  
.teamProfile {
  width: 148px;
  margin:0 auto;
}
.teamProfileImg  {
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.teamProfileImg img {
  text-align: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
}
.teamProfileName h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 23px;
  color: #000000;
  text-align: center;  
}
.teamProfileName p {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  color: #888888;
  margin: 0;
}


/***********************************************
About PAGE CSS END
***********************************************/



/***********************************************
Footer CSS Start
***********************************************/
.footer {
  background: #000;
  color: #ffffff;
  position: relative;
  padding-top: 115px;
  padding-bottom: 35px;
  overflow: hidden;
  margin-top: 125px;
}
.footer::before {
  content: '';
  background: url(../images/monk.png) no-repeat;
  width: 450px;
  height: 880px;
  background-size: contain;
  display: inline-block;
  position: absolute;
  bottom: -310px;
  left: 40px;
}
.footer .row:nth-child(2){
  margin-top: 80px;
}
.footer .d-flex{
  display: flex;
  justify-content: space-between;
}
.footer h3{
  font-size: 30px;
  line-height: 57px;
  color: #ffffff;
  width: 560px;
  max-width: 100%;
}
.footer .email{
  display: flex;
  flex-direction: column;
  text-align: right;
}
.footer .email span{
  font-size: 16px;
  color: #ffffff;
  position: relative;
  margin-bottom: 30px;
}
.footer .email span::after{
  content: '';
  background: url('../images/arrow.png')no-repeat;
  width: 26px;
  height: 32px;
  background-size: contain;
  display: inline-block;
  position: absolute;
  left: 145px;
  top: 5px;
}
.footer .email a{
  font-size: 36px;
  color: #EA552B;
  font-family: 'GRIFTER';
}
.footer h4{
  font-size: 20px;
  color: #ffffff;
  letter-spacing: 0.02em;
  margin-bottom: 34px;
}
.footer .links-item{
  display: flex;
}
.footer .links-item ul{
  width: 50%;
}
.footer ul li a{
  font-size: 16px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.footer ul li a:hover{
  color: #EA552B;
}
.footer ul li svg path{
  transition: all 0.4s ease-in-out;
}
.footer ul li a:hover svg path{
  stroke: #EA552B;
}
.footer ul li{
  margin-bottom: 34px;
  display: flex;
  align-items: center;
}
.footer ul li svg{
  margin-right: 20px;
}
.footer .copywrite{
  margin-top: 50px;
}
.footer .copywrite p{
  color: #ffffff;
  font-size: 14px;
}
/***********************************************
Footer CSS End
***********************************************/


/***********************************************
Project CSS Start
***********************************************/
.projectSection {
  padding: 120px 0;
}
.projectSectionInner {
  display: flex;
  align-items: center; 
  justify-content: space-between;
}
.projectIntroduction {
  flex: 0 1 637px;
  width: 637px;
  max-width: 637px;
  padding-right: 40px;
}
.projectIntroSection .projectIntroduction {
  flex: 0 1 551px;
  width: 551px;
  max-width: 551px; 
}
.projectIntroductionImg {
  flex: 0 1 562px;
  max-width: 562px;
  width: 562px; 
}
.project-image {
  width:490px;
  height:490px;
  margin-left: auto;
  position: relative;
}
.project-image .project-logo {
  position: absolute; 
  top: 0;
  left: 0;
  bottom: 0;
  max-width: 225px;
  max-height: 225px;
  right: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-image .project-logo img {
  max-width: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
}
.project-image .project-animation-logo {
  position: absolute;
  top: -105px;
  left: -105px;
  height: 700px;
  width: 700px;
  -webkit-animation: rotate 9s normal linear infinite;
  animation: rotate 9s normal linear infinite;
}
.projectIntroductionImg {
  text-align: right;
}
.projectIntroduction h2,
.projectIntroduction p {
  margin-bottom: 20px;
}

.projectIntroduction ul {
  padding-left: 50px;
  padding-bottom: 30px;
}

.projectIntroduction ul li{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #232323;
  opacity: 0.8;
  list-style: circle;
}

.projectIntroduction p:last-child {
  margin-bottom:0px;
}

.projectReviewSection {
  background: #E1EAF4 url('../images/background-pattern.png') repeat;
  padding: 90px 0;
  position: relative;
}
.projectReviewInner {
  max-width: 701px;
  margin: 0 auto;
  position: relative;
}
.projectReviewInner::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: -267px;
  background: url(../images/testimonial-bg.png) center no-repeat;
  width: 110px;
  height: 41px;
}
.projectReviewContent {
  position: relative;
  margin-bottom: 40px;
}
.projectReviewContent::before {
  content: "";
  position: absolute;
  top: -70px;
  left: -105px;
  background: url(../images/project-review-profile-icon.png) center no-repeat;
  width: 100px;
  height: 82px;
}
.projectReviewContent p {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.02em;
  color: #000000;
  position: relative;
    z-index: 1;
}

.projectReviewProfile {
  display: flex;
  align-items: center;
}
.projectReviewProfileImg span img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.projectReviewProfileName {
  padding-left: 20px;
}
.projectReviewProfileName h3 {
  font-size: 20px;
  margin-bottom: 8px;
}
.projectReviewProfileName p {
  margin-bottom: 0px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #7A7A7A;
}

.projectLogoSection {
  padding:113px 0 120px;
  overflow: hidden;
}
.projectIntroduction h2 {
  font-size: 39px;
}

.projectSlidSection {
  padding: 0 0 120px;
}
/* Default slide */
.projectSlidInner .slick-slide{
  display: flex;
  height: 395px;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease-in-out;
}

/* Active center slide (You can change anything here for cenetr slide)*/
.projectSlidInner .slick-center,
.projectSlidInner .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] {
  transform: scale(1.3);
  border-radius: 4px;
}
.projectSlidInner .slick-current.slick-active {
  transform: scale(1.3);
}
.projectSlidInner .slick-current.slick-active img,
.projectSlidInner .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] {
  box-shadow: 0px 4px 50px 1px rgba(252, 204, 101, 0.2);
  border-radius: 4px;
}
.projectSlidImg img {
  width: 100%;
}


/***********************************************
Project CSS End
***********************************************/


/***********************************************
Portfoilo CSS Start
***********************************************/
.portfoiloSection {
  padding: 100px 0 0;
}

.portfoiloWrapInner {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.portfoiloInnerItem {
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
  padding: 0 15px;
  margin-bottom: 40px;
}

.portfoiloInnerItemImg {
  position: relative;
  overflow: hidden;
}
.portfoiloInnerItemImg > img {
  width: 100%;
}

.portfoiloInnerItemContent {
  position: absolute;
  bottom: -100px;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0 25px;
  background: #EA552B;
  height: 100px;
  display: flex;
  justify-content: space-between;
  border-radius: 0 0 10px 10px;
  align-items: center;
  transition: all 500ms ease-in-out;
}
.portfoiloInnerItemImg:hover .portfoiloInnerItemContent {
  bottom: 0;
}
.portfoiloInnerItemContent h3 {
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  letter-spacing: 0.02em;
  margin: 0;
  color: #ffffff;
}
.view-more-btn{
  font-family: 'GRIFTER';
  background: #000;
  color: #ffffff;
  border-radius: 10px;
  padding:15px 20px;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 500ms ease-in-out;
}
.view-more-btn:hover, .view-more-btn:active, .view-more-btn:focus{
  color: #ffffff;
}
.lg-img-wrap{
  overflow-y: auto;
  width: 900px !important;
  height: 100vh !important;
  margin: 0 auto;
  max-width: calc(100% - 40px) !important;
}
.lg-outer .lg-object{
  position: absolute !important;
  max-height: inherit !important;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.lg-backdrop{
  background: rgba(2, 2, 2, 0.8) !important;
}
.lg-toolbar .lg-close:after{
  content: url('../images/close-icon.svg');
}
.lg-prev:after{
  content: url('../images/arrow-left.svg');
}
.lg-next:before{
  content: url('../images/arrow-right.svg');
}

.portfoiloSection .anyProjectInnerBtn {
  margin: 0 auto;
  text-align: center;
}
/***********************************************
Portfoilo CSS End
***********************************************/



/***********************************************
Contact CSS Start
***********************************************/
.infomationSection {
  padding: 102px 0;
}

.contactInfomationInner {
  display: flex;
  align-items: center;
  margin: -15px;
  flex-wrap: wrap;
}
.contactInfomation,
.contactInfomationImg {
  max-width: 50%;
  flex: 0 0 50%;
  width: 50%;
  padding: 0 15px;
}
.contactInfomation{
  text-align: right;
}
.contactInfomation .pageTitle {
  margin-bottom: 40px;
  text-align: left;
}
.infomationList {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-bottom: 30px;
  align-items: flex-start;
}
.infomationListRow {
  border-radius: 10px;
  height: 60px;
  line-height: 60px;
  display: inline-flex;
  align-items: center;
}
.infomationListItem {
  margin-bottom: 24px;
}
.infomationListItem:last-child {
  margin-bottom: 0;
}
.infomationListItem .mailBox{
  background: #000;
}
.infomationListRow a {
  margin-bottom: 0;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #ffffff;
  display: flex;
  align-items: center;
  word-break: break-all;
  padding: 0 26px;
  padding-right: 70px;
  height: 100%;
}

.infomationListRow span {
  display: inline-flex;
  padding-right: 0;
  width: 45px;
}


.contact-social ul {
  display: flex;
  margin: 0 -10px;
}

.contact-social ul li {
 padding: 0 10px;
}

.contact-social ul li a {
  background: rgba(234, 85, 43, 0.2);
  border-radius: 10px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#EA552B;
}
.contact-social ul li a:hover {
  background: #EA552B;
  color:#fff;
}



.contactSection {
  background: #fffcf9;
  padding: 60px 0;
  position: relative;
}
.contactSection::after {
  content: "";
  position: absolute;
  top: 60px;
  left: -8px;
  background: url(../images/contact-bg.png) center no-repeat;
  width: 72px;
  height: 185px;
}
.contactInner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.contactLeftImg, .contactForm {
  width: 50%;
  max-width: 50%;
  flex: 0 0 50%;
  padding: 0 15px;
}
.contactLeftImg .pageTitle {
  margin-bottom: 50px;
}
.contactLeftImg .pageTitle p {
  max-width: 385px;
}
.contactImg {
  width: 100%;
  text-align: center;
}
.form-group {
  margin-bottom: 20px;
}

.form-group .form-control {
  border: 1px solid #828282;
  border-radius: 10px;
  height: 48px;
  padding: 0 15px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #232323;
  width: 100%;
  line-height: 48px;
  background: transparent;
}
.form-group .form-control:focus {
  outline: none;
  box-shadow: inherit;
  border-color: #EA552B;
}

.contactForm .itemRow {
  margin: 0 -10px;
}
.contactForm .itemCol {
  padding:0 10px;
}
.form-group .form-control::-webkit-input-placeholder {
  color: #232323;
}
.form-group .form-control::-moz-placeholder {
  color: #232323;
}
.form-group .form-control:-ms-input-placeholder {
  color: #232323;
}
.form-group .form-control:-moz-placeholder {
  color: #232323;
}

.form-group textarea.form-control {
  height: 96px;
  resize: none;
}

.form-group select.form-control {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: url('../images/down-arrow.png') no-repeat right;
  background-position: 94% 20px;
  cursor: pointer;
  padding-right: 30px;
}
.form-group p.form__hint {
  width: 100%;
  text-align: left;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #808080;
  margin-bottom: 10px;
}
.form-group p.form__hint:last-child {
  margin-bottom: 0;
}
.form-group p.form__hint a {
  color: #232323;
  text-decoration: underline;
}
.form-group p.form__hint a:hover {
  color: #EA552B;
}
.uploadWrap {
  position: relative;
}
.uploadWrap label {
  display: flex;
  align-items: center;
  background: rgba(252, 204, 101, 0.2);
  border: 1px dashed #EA552B;
  border-radius: 10px;
  height: 48px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #232323;
  margin: 0;
  padding:0 100px 0 15px; 
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uploadWrap label .icon {
  margin-right: 15px;
  flex: 0 0 34px;
  max-width: 34px;
  width: 34px;
}
.uploadWrap label .text {
  width: calc(100% - 50px);
  max-width: calc(100% - 50px);
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uploadWrap .form-control {
  position: absolute;
  visibility: hidden;
}
.uploadInner {
  position: absolute;
  top: 0;
  right: 0px;
  z-index: 0;
}
.uploadInner .btn {
  height: 48px;
  line-height: 48px;
  border-radius: 10px;
  width: 97px;
  text-align: center;
  justify-content: center;
}

.uploadWrap p img {
  padding-right: 10px;
}
.form-group p.fileUploadText {
  width: 100%;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #808080;
  margin: 20px 0 0;
  padding-bottom: 10px;
}
.form-error-message{
  display: none;
}
.form-line-active{
  background: transparent !important;
}
.form-all{
  max-width: 100%;
  background: #FBE8DE url('../images/background-pattern.png') repeat;
  position: relative;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
  padding: 100px 120px;
}
.form-all:before{
  top: 135px;
}

.form-all:after{
  width: 175px;
}
.form-all ul.page-section{
  padding: 0;
}
.form-all .form-line{
  margin: 0 0 20px 0;
  padding: 0;
}
.form-buttons-wrapper{
  padding: 0;
  justify-content: flex-end;
  margin: 0;
}
.form-all .form-dropdown:not([size]), .form-all  .form-textbox{
  height: 48px;
}
li[data-type=control_fileupload] .qq-upload-button, .inputContainer{
  height: 165px;
  padding: 32px;
  text-align: center;
}
.form-dropdown, .form-textarea, .form-textbox, .signature-pad-passive, .signature-wrapper{
  border-color: #828282;
}
.form-dropdown:first-child, .form-dropdown:required:invalid{
  font-weight: 400;
}
.form-all p{
  font-family: 'GRIFTER';
  margin-top: 10px;
}
/***********************************************
Contact CSS End
***********************************************/

/***********************************************
services-details CSS Start
***********************************************/
.innerBanner {
  position: relative;
}
.webflowSection {
  padding: 112px 0 73px;
}
.webflowSection .projectSectionInner {
  display: flex;
  align-items: center;
  margin: 0 -15px;
  flex-wrap: wrap;
}
.webflowSection .projectIntroductionImg,
.webflowSection .projectIntroduction {
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
  padding: 0 15px;
}
.webflowSection .projectIntroduction  {
  padding-right: 15px;
  padding-left: 52px;
}
.services-details-icon {
  max-width: 310px;
  margin: 0 auto;
  bottom: -36px;
  position: absolute;
  left: 0;
  right: 0;
}
.featuresIncludedSection.projectReviewSection::before {
  top: 220px;
  bottom: inherit;
}
.featuresInner .pageTitle {
  margin-bottom: 64px;
  text-align: left;
}
.featuresInner .pageTitle h2 {
  margin-bottom: 20px;
}
.featuresInner .pageTitle p {
  color: #000000;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  text-align: left;
  margin: inherit;
  width: 100%;
}
.featuresInnerWrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  position: relative;
}
.featuresInnerItem {
  max-width: 50%;
  flex: 0 0 50%;
  width: 50%;
  padding: 0 15px;
  display: flex;
  align-items: flex-start;
  margin-bottom: 55px;
}
.featuresInnerItem:last-child,
.featuresInnerItem:nth-last-child(2) {
  margin-bottom: 0;
}
.featuresNumber {
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featuresNumber span {
  border-radius: 50%;
  background: #EA552B;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  font-style: normal;
  font-family: 'GRIFTER';
  font-size: 18px;
  line-height: 38px;
  letter-spacing: 0.02em;
  color: #ffffff;
  width: 33px;
  height: 33px;
  display: flex;
  justify-content: center;
}
.featuresContent {
  flex: 1 1 auto;
  margin-left: 11px;
}
.featuresContent h3 {
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.02em;
  color: #000000;
  margin-bottom: 10px;
}
.featuresContent p {
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #232323;
  max-width: 496px;
  margin-bottom: 0px;
}

.webflowPackageSection {
  padding: 100px 0 54px;
}
.webflowPackageSection .pageTitle {
  margin-bottom: 70px;
}
.webflowPackageBtn {
  width: 100%;
  text-align: center;
}
.webflowPackageSection .hmPortfolioCol {
  margin-bottom: 56px;
}

.servicesDetailsContact {
  padding-bottom: 98px;
}
.servicesDetailsContactInner {
  background: #FFFCF7;
  border-radius: 20px;
  max-width: 1020px;
  margin: 0 auto;
  padding: 104px 114px 60px;
  position: relative;
}
.servicesDetailsContactInner::after {
  content: "";
  position: absolute;
  top: 50px;
  right: 60px;
  left: inherit;
  width: 48px;
  height: 105px;
  background: url(../images/services-border-arrow-img-right.svg) center no-repeat;
}
.servicesDetailsContactInner .contactForm {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding: 0;
}
.servicesDetailsContactInner .form-group p.form__hint {
  text-align: left;
}

.servicesDetailsContactInner .pageTitle {
  margin-bottom:40px; 
}
.servicesDetailsContactInner .pageTitle h2 {
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
  line-height: 46px;
  letter-spacing: 0.02em;
  margin-bottom: 10px;  
  color: #000000;
}
.servicesDetailsContactInner .pageTitle p {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.02em;
  color: #000000;
  margin-bottom:0px; 
}
/***********************************************
services-details CSS End
***********************************************/
.two-column{
  display: flex !important;
}
.cc-window.cc-banner{
  display: flex;
  padding: 20px 30px;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
}

.reactjsService.services-details-icon {
  left: 50%;
  transform: translateX(-50%);
  right: auto;
}
.reactjsService.centerBg::after {display: none;}

/***********************************************
Cookies Changes
***********************************************/
#cookit-button {color: #000; font-weight: 600;}
#cookit-message { font-weight: 400;color: #fff;}

/***********************************************
Landing Page CSS
***********************************************/
.landingpage h1{
  width: 1000px;
  max-width: 100%;
  margin: 15px auto;
}
.landingpage .bannerBtn{
  margin-top: 60px;
}
.landingpage .bannerBtn a{
  margin: 0 15px;
}
.transparentBG{
  background: transparent;
}
.featureList ul{
  display: flex;
  flex-wrap: wrap;
}
.featureList ul li{
  font-size: 18px;
  line-height: 24px;
  width: 50%;
  padding: 0 15px 0px 45px;
  margin-bottom: 40px;
  position: relative;
}
.featureList ul li:before{
  content: "";
  background: url("../images/checkmark.svg")no-repeat;
  width: 30px;
  height: 30px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.hire-developer{
  background: #F5E3D9;
  padding: 50px;
}
.hire-developer h2{
  text-align: center;
  margin-bottom: 60px;
}
.servicesCardItemContentHeading{
  border-bottom: 1px solid rgba(0,0,0,0.1);
  text-align: center;
}
.servicesCardItemContentHeading span{
  font-size: 22px;
  font-family: 'GRIFTER';
}
.servicesCardItemContentHeading h3{
  font-size: 35px;
  padding: 10px 0;
  margin-bottom: 0;
}
.servicesCardItemContent ul{
  padding: 20px 0;
}
.servicesCardItemContent ul li{
  font-size: 14px;
  line-height: 24px;
  position: relative;
  padding-left: 15px;
  margin-bottom: 5px;
}
.servicesCardItemContent ul li:before{
  content: '';
  width: 4px;
  height: 4px;
  background: #232323;
  display: inline-block;
  position: absolute;
  top: 9px;
  left: 2px;
  border-radius: 100px;
}
.hire-developer .servicesCardCol{
  min-height: 410px;
}
.hire-developer .servicesCardItemBtn{
  margin-top: 0;
}
.hire-developer .servicesCardItemBtn .btn-secondary{
  width: 100%;
}
.wordpress-customization h2{
  text-align: center;
}
.btn-row-center{
  width: 100%;
  text-align: center;
  margin-top: 60px;
}
.bg-transparent{
  background: transparent;
  padding-bottom: 0;
}
.planmodal .form-all{
  background: transparent;
  padding: 0 20px 20px;
}
.planmodal .form-all:before, .planmodal .form-all:after{
  display: none;
}