@font-face {
    font-family: 'Neue Haas Grotesk Display Pro 75 Bold';
    src: url('../fonts/NeueHaasDisplay-Bold.eot');
    src: url('../fonts/NeueHaasDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NeueHaasDisplay-Bold.woff2') format('woff2'),
        url('../fonts/NeueHaasDisplay-Bold.woff') format('woff'),
        url('../fonts/NeueHaasDisplay-Bold.ttf') format('truetype'),
        url('../fonts/NeueHaasDisplay-Bold.svg#NeueHaasDisplay-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro 45 Light';
    src: url('../fonts/NeueHaasDisplay-Light.eot');
    src: url('../fonts/NeueHaasDisplay-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NeueHaasDisplay-Light.woff2') format('woff2'),
        url('../fonts/NeueHaasDisplay-Light.woff') format('woff'),
        url('../fonts/NeueHaasDisplay-Light.ttf') format('truetype'),
        url('../fonts/NeueHaasDisplay-Light.svg#NeueHaasDisplay-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro 65 Medium';
    src: url('../fonts/NeueHaasDisplay-Medium.eot');
    src: url('../fonts/NeueHaasDisplay-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NeueHaasDisplay-Medium.woff2') format('woff2'),
        url('../fonts/NeueHaasDisplay-Medium.woff') format('woff'),
        url('../fonts/NeueHaasDisplay-Medium.ttf') format('truetype'),
        url('../fonts/NeueHaasDisplay-Medium.svg#NeueHaasDisplay-Mediu') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro 55 Roman';
    src: url('../fonts/NeueHaasDisplay-Roman.eot');
    src: url('../fonts/NeueHaasDisplay-Roman.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NeueHaasDisplay-Roman.woff2') format('woff2'),
        url('../fonts/NeueHaasDisplay-Roman.woff') format('woff'),
        url('../fonts/NeueHaasDisplay-Roman.ttf') format('truetype'),
        url('../fonts/NeueHaasDisplay-Roman.svg#NeueHaasDisplay-Roman') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

*{
  margin:0;
  padding:0;
  line-height:100%;
  box-sizing: border-box;
}
.img-responsive {
  width: 100%;
  height: auto;
}
body {
  font-family: 'Neue Haas Grotesk Display Pro 45 Light';
  color: #ffffff;
  background:#0f0f0f;
  position:relative;
}
a {
  color: #ffffff;
  text-decoration:none;
}
a:hover {
  color: #ffffff;
  text-decoration:none;
}
ul, ul li{
  list-style:none;
}
.container {
  max-width: 1170px;
}
.mobile-logo{
  display:none;
}
.logo img{
    max-width:130px;
}
.welcome{
  text-align:center;
  display: flex;
  align-items: center;
  justify-content: center;
  /*height:100vh;*/
  height: calc(100vh - 128px);
}
.welcome h1, .bulb-text h1 {
  font-size:55px;
  font-weight:normal;
  padding:25px 0 35px;
  letter-spacing:2px;
}

.btn-common{
  border:1px solid #ffffff;
  color:#ffffff;
  background:#0f0f0f;
  border-radius:50px;
  text-align:center;
  padding:20px 69px;
  font-size:16px;
  display:inline-block;
  position: relative;
  transition: transform 0.5s ease-out;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.btn-common img{
  padding-left:10px;
  vertical-align:middle;
}
.btn-common:hover img{
  transform: rotate(40deg);
  transition: transform 0.5s ease-out;
}
.btn-common:hover::before{
    content: "";
    border: 1px solid #ffffff;
    position: absolute;
    border-radius: 50px;
    top: 8px;
    right: -8px;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: transform 0.5s ease-out;
}
.view-case-study-btn{
  background:#0f0f0f;
}

/* Menu Css */
.menu {
  display: inline-block;
    cursor: pointer;
    position: fixed;
    top: 99px;
    right: 141px;
    z-index:99;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 2px;
  background-color: #ffffff;
  margin: 6px 0;
  transition: 0.4s;
  border-radius:5px;
  -webkit-filter:contrast(0.9%);
  -moz-filter:contrast(0.9%);
  -ms-filter:contrast(0.9%);
  filter: contrast(0.9%);
  display: none;
}
.header-inner-pages .bar1, .header-inner-pages .bar2, .header-inner-pages .bar3{
  filter: none !important;
  display: block;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
  background:#0f0f0f;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -5px) rotate(45deg);
  background:#0f0f0f;
}
.mysidebar{
  width:960px !important;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  background-color: #ffffff;
  /*overflow-x: hidden;*/
  padding-top: 0px;
  transition: 0.5s;
  border-left:1px solid #e4e4e4;
}

.sidenav .menu-list li{
  margin-bottom:47px;
}

.sidenav .menu-list a {
  text-decoration: none;
  color: #aaaaaa;
  display: inline-block;
  transition: 0.3s;
  font-weight:500;
  font-size:57px;
}
.sidenav a:last-child {
  padding-bottom:0px;
}
.sidenav a:hover {
  color: #0f0f0f;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.menu-content{
  padding:100px 145px;
  position:relative;
  overflow:hidden;
}
.social-media{
  display:inline-flex;
  margin-top:133px;
}
.social-media a{
  border:1px solid #999999;
  border-radius:100%;
  color:#0f0f0f;
  font-size:25px;
  font-weight:bold;
  text-align: center;
  display:block;
  margin-right:15px;
  width:55px;
  height:55px;
  line-height:55px;
  font-family: 'Neue Haas Grotesk Display Pro 75 Bold';
}
.social-media a:hover{
  color:#ffffff;
  transition:ease-out 0.3s;
}
.social-media a.fb:hover{
  background:#3b5998;
  border-color:#3b5998;
}

.social-media a.ln:hover{
  background:#ff3366;
  border-color:#ff3366;
}
.social-media a.be:hover{
  background:#053eff;
  border-color:#053eff;
}
.social-media a.pi:hover{
  background:#bd081c;
  border-color:#bd081c;
}
.social-media a.in:hover{
  background:#0a66c2;
  border-color:#0a66c2;
}

.explore-menu{
  font-size:20px;
  text-transform:capitalize;
  margin-bottom:92px;
  color:#0f0f0f;
  letter-spacing:4px;
}
.get-in-touch{
  position: absolute;
  bottom: 330px;
  right: 180px;
}
.get-in-touch-text{
  color:#999999;
  font-size:16px;
  margin-bottom:10px;
  letter-spacing:2px;
}
.get-in-touch .email a,
.get-in-touch .mobile a{
  color:#0f0f0f;
  font-size:24px;
  margin-bottom:10px;
  display: inline-block;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
}
/* End Menu css */

/* Header Inner pages */
.header-inner-pages{
  padding:50px 0px 50px 141px;  
}
.header-inner-pages .menu {
  position: fixed;
  top:50px;
}
/* End Header Inner pages */


/* Main Section */

.main{
    position: relative;
    z-index: 8;
    overflow: hidden;
    display:block;
    height: 100vh;
    min-height: 100vh;
    padding-bottom: 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    background-color: #0f0f0f;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-perspective-origin: 50% 100%;
    perspective-origin: 50% 100%;
    border-top:1px solid #444444;
    border-bottom:1px solid #444444;
}
.w-layout-grid {
    display: -ms-grid;
    display: grid;
    grid-auto-columns: 1fr;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
    grid-row-gap: 16px;
    grid-column-gap: 16px;
}    
.main-inner{
  position: relative;
    z-index: 1;
    height: 100%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    border-bottom: 1pxsolidhsla(0,0%,63.9%,.3);
}
.main-left{
   -ms-grid-column: span 1;
    grid-column-start: span 1;
    -ms-grid-column-span: 1;
    grid-column-end: span 1;
    -ms-grid-row: span 1;
    grid-row-start: span 1;
    -ms-grid-row-span: 1;
    grid-row-end: span 1;
    -ms-grid-row-align: flex-start;
    align-self: flex-start;
    color:#ffffff;
    padding:35px 0 0 141px;
}
.main-left h1{
  font-size:85px;
  font-weight:normal;
  padding:264px 0 51px;
  letter-spacing:4px;
}
.c-hero__grid{
    position: relative;
    z-index: 30;
    display: -ms-grid;
    display: grid;
    grid-template-rows: 1fr auto;
    width: 100%;
    height: 100%;
    /*grid-auto-columns: 1fr;*/
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    /*-ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;*/
}
.c-hero__grid-item {
    position: relative;
    z-index: 30;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    padding: 2em;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    border-top: 1px solid hsla(0,0%,100%,.2);
    border-left: 1px solid hsla(0,0%,100%,.2);
    -webkit-transition: none;
    transition: none;
    grid-row: 1 / -1;
    grid-column: 1;
}
.c-hero__grid-item.cc--home {
    height: 100%;
    max-width:100%;
}
.c-hero__grid-bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56vh;
    height: 56vh;
    max-width: none;
}
.c-hero__service-link {
    position: relative;
    z-index: 500;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #fafafa;
    text-decoration: none;
}
.c-hero__service-title {
    position: relative;
    overflow: hidden;
    padding-right: 8px;
}

.main-inner{
  column-count: 2;
  column-gap: 0px;
}
.main-inner .common-box{
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  break-inside: avoid;
  border:1px solid #444444;
  border-right:0px;
  border-bottom:0px;
  height:33.33vh;
}
.main-inner .common-box:nth-child(1){
  border-top:0px;
}
.main-inner .common-box:nth-child(4){
  border-top:0px;
}
.main-inner .common-box:nth-child(4),
.main-inner .common-box:nth-child(5){
  height:50vh;
}
.main-inner .common-box .content-box .link-box{
  position: relative;
  display:block;
  height:100%;
  width:100%;
  transition: transform 0.5s ease-out;
}
.main-inner .common-box .content-box .link-box .left-text-link{
  font-size:36px;
  position: absolute;
  bottom: 36px;
  left: 36px;
  font-weight:500;
  line-height:112%;
  min-width:200px;
}
.main-inner .common-box .content-box .link-box .right-arrow-link{
 display: none;
}
.main-inner .common-box .content-box .link-box .right-arrow-link img{
 vertical-align:middle;
}
.main-inner .common-box .content-box .link-box:hover .right-arrow-link{
  display:block;
  position: absolute;
  bottom: 36px;
  right: 36px;
  border:1px solid #ffffff;
  width:60px;
  height:60px;
  text-align:center;
  line-height:55px;
  border-radius:100%;
  transition: transform 0.5s ease-out;
}
.main-inner .common-box .content-box .link-box .left-text-link{
  overflow: hidden;
}
.main-inner .common-box .content-box .link-box:after {
    opacity: 0;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    background: transparent linear-gradient(53deg, #FF9A9A 0%, #FAD0C4 100%) 0% 0% no-repeat padding-box;;
}
.main-inner .common-box .content-box .link-box.two:after {
  background: transparent linear-gradient(41deg, #667EEA 0%, #764BA2 100%) 0% 0% no-repeat padding-box;
}
.main-inner .common-box .content-box .link-box.three:after {
  background: transparent linear-gradient(53deg, #2AF598 0%, #009EFD 100%) 0% 0% no-repeat padding-box;
}
.main-inner .common-box .content-box .link-box.four:after {
  background: transparent linear-gradient(41deg, #0470DC 0%, #13F1FC 100%) 0% 0% no-repeat padding-box;
}
.main-inner .common-box .content-box .link-box.five:after {
  background: transparent linear-gradient(222deg, #A9C9FF 0%, #FFBBEC 100%) 0% 0% no-repeat padding-box;
}
.main-inner .common-box .content-box .link-box:hover:after {
    opacity: 1;
    transition: 0.5s;
}

.main-inner .common-box .content-box .link-box .left-text-link span {
    position: relative;
    bottom: 0;
    left: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}
.main-inner .common-box .content-box .link-box:hover .left-text-link span {
    bottom: 40px;
    transition: 0.5s ease;
}
.main-inner .common-box .content-box .link-box .left-text-link:after {
    content: "View Details";
    position: absolute;
    bottom: -50px;
    left: 0;
    z-index: 1;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}
.main-inner .common-box .content-box .link-box:hover .left-text-link:after {
    bottom: 0px;
    transition: 0.5s;
}
/* End Main Section */

/* Let's find us */
 .lets-find-us {
   background:#ffffff;
   border:1px solid #f3f3f3;
 }
 .lets-find-us .main-left{
     color:#0f0f0f;
 }
 .lets-find-us h1, .lets-find-us .find-us{
  color:#0f0f0f;
 }
 .lets-find-us h1 {
   font-family: 'Neue Haas Grotesk Display Pro 55 Roman';
 }
 .lets-find-us img{
  padding-right:5px;
  vertical-align:middle;
 }
 .lets-find-us span{
  font-size:24px;
  line-height:27px;
  vertical-align:middle;
  font-family: 'Neue Haas Grotesk Display Pro 55 Roman';
 }
 .lets-find-us .address{
  margin:8px 0 25px 25px;
  font-weight:500;
  font-size: 21px;
  line-height: 27px;
  font-family: 'Roboto', sans-serif;
  color:#0f0f0f !important;
 }
 .lets-find-us .address span{
    color:#0f0f0f !important;
    color: inherit !important;
    text-decoration: none !important;
 }
 .lets-find-us a[href^=tel] {
    color: inherit !important;
    text-decoration: none !important;
}
 .lets-find-us .social-media-footer {
  padding:50px 0 100px;
  display: block;
 }
 .lets-find-us .social-media-footer .social-media{
  margin:0px;
 }
 .lets-find-us .main-inner .common-box .content-box .link-box .left-text-link span{
  color:#0f0f0f;
 }
 .lets-find-us .main-inner .common-box{
  height:50vh;
 }
 .lets-find-us .main-inner .common-box:last-child{
  height:100vh;
 }
 .lets-find-us .main-inner .common-box:nth-child(3){
  border-top:0px;
 }
 .lets-find-us .main-inner .common-box{
  border:1px solid #f3f3f3;
  border-right: 0px;
  border-bottom: 0px;
 }
 .lets-find-us .main-inner .common-box:nth-child(1),
 .lets-find-us .main-inner .common-box:nth-child(3){
  border-top:0px;
 }
 .lets-find-us .main-inner .common-box:nth-child(4){
  border-top:0px;
 }
 .lets-find-us .main-inner .common-box .content-box .link-box:hover:after{
  background:  transparent linear-gradient(33deg, #ACCBEE 0%, #E7F0FD 100%) 0% 0% no-repeat padding-box; 
}
.lets-find-us .main-inner .common-box .content-box .link-box:hover .left-text-link:after{
  display: none;
}
.lets-find-us .main-inner .common-box .content-box .link-box:hover .left-text-link span{
  bottom:0px;
}
.lets-find-us .main-inner .common-box .content-box .link-box .left-text-link img{
  margin-bottom:20px;
}
.lets-find-us .main-inner .common-box .content-box .link-box .right-arrow-link img{
  width:24px;
  height:auto;
  filter: grayscale(1);
}
.lets-find-us .main-inner .common-box .content-box .link-box .right-arrow-link{
  display: block;
  bottom: 15px;
  right: 20px;
  width: 30px;
  height: 30px;
  line-height: 25px;
  position: absolute;
  border:;
}
.lets-find-us .main-inner .common-box .content-box .link-box:hover .right-arrow-link{
 border:0px;
}
.lets-find-us .main-inner .common-box .content-box .link-box:hover .right-arrow-link  img.arrow-gray,
.lets-find-us .main-inner .common-box .content-box .link-box .right-arrow-link img.arrow-black{
 display:none;
}

.lets-find-us .main-inner .common-box .content-box .link-box:hover .right-arrow-link img.arrow-black{
  display:block;
  transform: scale(1.8);
  transition: transform .5s ease-out;
}
.lets-find-us .main-inner .common-box .content-box .link-box .left-text-link:after{
  display: none;
}
/* End Let's find us */

/* Footer css */
.footer{
  padding:50px 0;
  background:#ffffff;
  color:#999999;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.31px;
}
.footer-container{
  max-width:1638px;
  margin:0 auto;
  display:block;
}
.footer-inner{
  display: flex;
  justify-content:space-between;
}
.footer-inner ul{
  display: flex;
}
.footer-inner ul li{
  margin-right:75px;
} 
.footer-inner ul li a{
  font-size:17px;
  color:#999999;
  font-family: 'Roboto', sans-serif;
}
.footer-inner ul li a:hover{
  color:#0f0f0f;
}
/* End Footer css */

/*this css is about us section*/

.about-us {
  display: flex;
  justify-content: center;
  padding: 200px 0;
  border-bottom:1px solid #444444;
}
.play-button-container {
    align-items: center;
    background: linear-gradient(120deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.2));
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    box-shadow: 0 24px 72px 0 rgb(0 0 0 / 50%);
    display: flex;
    height: 110px;
    justify-content: center;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    width: 110px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
}
.play-button-container .play-button {
    align-items: center;
    background: #fff;
    border-radius: 100%;
    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 30%);
    display: flex;
    height: 85px;
    justify-content: center;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    width: 85px;
    z-index: 2;
}
.play-button-container .play-button svg {
    height: 34px;
    width: 34px;
}
.play-button-container:hover .play-button {
    transform: scale(1.16);
    cursor:pointer;
}
.play-button-container:hover {
    transform: translate(-50%,-50%) scale(.96);
}
text {
  fill: #0f0f0f;
}
.bulb-tab img {
  width: 372px;
  height: 586px;
  margin: 0 auto;
  display: table;
}
.bulb-text a.btn-common {
  position: relative;
}
.bulb-text a.btn-common:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #444444;
  width: 100%;
  height: 100%;
  border-radius: 45px;
  z-index: 1;
}
.bulb-text a:hover btn-common:after {
  top: 10px;
  left: 10px;
  transition: 0.5s;
}
.ways-tab {
  display: flex;
  width: 1300px;
  justify-content: space-between;
  align-items: flex-start;
}
.bulb-text {
  /*width: 710px;*/
  padding-left: 247.30px;
}
.bulb-text h1 {
  margin-top: 20px;
  text-align: left;
  font-family: 'Neue Haas Grotesk Display Pro 55 Roman';
  font-size:65px;
  line-height:75px;
  letter-spacing: 2.48px;
} 
.bulb-text p {
  font-size: 20px;
  line-height: 30px;
  text-align: left;
  font-family: 'Roboto', sans-serif;
  font-weight:300;
  letter-spacing:0.4px;
}
.bulb-text a {
  float: left;
  display: inline-flex;
  align-items: center;
  color: #fff;
  margin-top: 50px; 
  font-size: 20px;  
   font-family: 'Roboto', sans-serif;
}
.bulb-text a img, .our-heading a img, .carlijnq-tab a img {
  /*margin-left: 20px;*/
}
.bulb-text a:hover img, .our-heading a:hover img, .carlijnq-tab a:hover img {
  transform: rotate(35deg);
  transition: 0.5s;
}
.carlijnq-tab:hover a.btn-common {
  background: transparent;
  transition: 0.3s;
}
.carlijnq-tab:hover a.view-case-study-btn{
  background: #0f0f0f;
}
/*End css of About us section*/


/*This css start of Our Work Section*/

.our-heading {
  margin:0 auto;
  display: table;
}
.our-title {
  display: flex;
  align-items: center;
  width: 1638px;
  justify-content: space-between;
}
.our-title h1 {
  color: #fff;
  font-size: 55px;
  font-weight:normal;
  font-family: 'Neue Haas Grotesk Display Pro 45 Light';
  letter-spacing: 3.58px;
}
.our-heading a {
  display: inline-flex;
  align-items: center;
  color: #fff;

  font-size: 20px;
}

.our-heading a {
  /*margin-left: 942.2px;*/
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.our-heading {
  margin-top: 91px;
  margin-bottom: 90px;
}
.carlijnq-tab {
  width: auto;
  height: 100% !important;
  border-top: 1px solid #444444;
  border-right: 1px solid #444444;
  border-bottom: 1px solid #444444;
}
.carlijnq-tab:hover {
  border-color:transparent;
}
.carlijnq-tab .product-text{
    min-height:125px;
}
#owl-carousel-our-work .owl-item{
  margin:0 !important;
}
#owl-carousel-our-work .owl-item img.hover-img{
  width:100%;
  height:100%;
  position: absolute;
  object-fit: cover;
}
#owl-carousel-our-work .owl-item .case-study-arrow{
  width:auto;
}
#owl-carousel-our-work .owl-nav button.owl-next, 
#owl-carousel-our-work .owl-nav button.owl-prev,
#owl-carousel-inside-ar .owl-nav button.owl-next, 
#owl-carousel-inside-ar .owl-nav button.owl-prev{
  padding:10px !important;
  /*border:1px solid #444444;*/
  border-radius:100%;
}
#owl-carousel-our-work .owl-dots .owl-dot span,
#owl-carousel-inside-ar .owl-dots .owl-dot span{
  height:2px;
  width:100px;
  border-radius:0px !important;
  margin:0 0 50px;
}
#owl-carousel-our-work .owl-nav button.owl-prev,
#owl-carousel-inside-ar .owl-nav button.owl-prev{
  position: relative;
  left: -100px;
}
#owl-carousel-our-work .owl-nav button .fa-long-arrow-alt-left:before,
#owl-carousel-inside-ar .owl-nav button .fa-long-arrow-alt-left:before{
 content: "01" !important;
 font-family: 'Neue Haas Grotesk Display Pro 45 Light' !important;
 font-size:13px;
 letter-spacing:2px;
}
#owl-carousel-our-work .owl-nav button .fa-long-arrow-alt-right:before,
#owl-carousel-inside-ar .owl-nav button .fa-long-arrow-alt-right:before{
 content: "05" !important;
 font-family: 'Roboto', sans-serif !important;
 font-size:13px;
 letter-spacing:2px;
}
#owl-carousel-inside-ar .owl-nav button .fa-long-arrow-alt-left:before{
 content: "01" !important;
 font-family: 'Roboto', sans-serif !important;
 font-size:13px;
 letter-spacing:2px;
 color:#0f0f0f;
}
#owl-carousel-inside-ar .owl-nav button .fa-long-arrow-alt-right:before{
 content: "05" !important;
 font-family: 'Neue Haas Grotesk Display Pro 45 Light' !important;
 font-size:13px;
 letter-spacing:2px;
 color:#0f0f0f;
}
#owl-carousel-inside-ar .owl-nav button:hover .fa-long-arrow-alt-left:before,
#owl-carousel-inside-ar .owl-nav button:hover .fa-long-arrow-alt-right:before{
  color:#ffffff;
}
#owl-carousel-our-work .owl-nav button.owl-next,
#owl-carousel-inside-ar .owl-nav button.owl-next{
  position: relative;
  right: -100px;
}
#owl-carousel-our-work .owl-nav,
#owl-carousel-inside-ar .owl-nav{
    position: relative;
    top: 23px;
    margin:0px;
}
#owl-carousel-our-work .owl-nav [class*=owl-]:hover{
   background: #ffffff;
   color: #0f0f0f;
}
#owl-carousel-inside-ar .owl-nav [class*=owl-]:hover{
   background: #0f0f0f;
   color: #ffffff;
}
#owl-carousel-inside-ar .inside-one{
  width:100%;
  overflow:hidden;
}
#owl-carousel-inside-ar .owl-item .blog-img{
  overflow:hidden;
}
#owl-carousel-inside-ar .owl-item .blog-img img{
  width:100%;
}
#owl-carousel-inside-ar .owl-item img{
  width:auto;
}
#owl-carousel-inside-ar .owl-item a img{
  margin:0 10px;
}
#owl-carousel-inside-ar .owl-dots .owl-dot.active span{
  background: #000000;
}
.product-title {
  font-size: 36px;
  color: #fff;

}
.carlijnq-tab>img {
  opacity: 0.2;
}
.carlijnq-tab:hover>img{
  opacity: 1;
  transition: 0.5s ease;
}
.carlijnq-tab:hover .product-text {
  opacity: 0;
  transition: 0.5s ease;
}

.carlijnq-tab {
  position: relative;
}
.product-wrap {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  padding:150px 100px;
  overflow:hidden;
}
.product-details {
  font-size: 18px;
  color: #fff;
  padding-top: 30px;
  padding-right: 0px;
  line-height: 26px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-subtext {
  font-size: 17px;
  color: #fff ;
  padding-top: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  letter-spacing: 0.17px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-subtext strong{
  margin:0 8px;
}
.product-subtext strong:first-child{
  margin-left:0px;
}
.carlijnq-tab a{
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  color: #fff;
  width: auto;
  margin-top: 304px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 0.17px;
}
.product-tab {
  display: flex;
}


/*End  css of Our Work Section*/


/*This  is start inside Ar section*/



.inside-ar {
  display: flex;
  justify-content: center;
  background:#ffffff;
  padding-bottom: 50px;
}
.inside-wrap {
  width: 1638px;
  
}
.inside-ar .our-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.inside-ar .our-heading a {
  background: #fff;
  color: #000;
  border-color: #000;
  /*margin-left: 1184px;*/
}
.inside-one {
  width: 526px;
  height: 570px;
  padding-bottom: 50px;
  
}
.inside-ar .inside-product {
  background:#ffffff
}
.inside-product {
  display: flex;
}
.inside-one .img-tab {
  width: 100%;
  height: 374px;
}
.blog-img>img {
  filter: grayscale(1);
}
.inside-two {
  margin-left: 30px;
}
.inside-ar .inside-two {
  margin-left: 0px;
}
.blog-img {
  overflow: hidden;
}
.inside-one:hover .blog-img>img {
  filter: grayscale(0);
  transition: 0.8s;
  transform: scale(1.2);
}
.inside-product p {
  color: #999999;
  font-size: 17px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.inside-wrap .our-heading {
  margin-top: 74px;
  margin-bottom: 74px;
}
p.blog-details {
  font-size: 27.5px;
  color: #0F0F0F;
  line-height: 36px;
  padding-right: 55px;
  font-family: 'Neue Haas Grotesk Display Pro 45 Light';
}
.calendor-text img {
  margin-right: 10px;
}
.calendor-text {
  display: flex;
  align-items: center;
  margin-top: 26px;
  margin-bottom: 18px;
}
.inside-wrap .our-heading h1 {
  font-size: 55px;
  font-weight:normal;
  color: #000000;
  font-family: 'Neue Haas Grotesk Display Pro 55 Roman';
}
.inside-one a {
  color: #999999;
  display: flex;
  align-items: center;
  font-size: 18px;
  letter-spacing: 0.36px;
  margin-top: 38px;
  margin-bottom: 81.38px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.inside-one a img {
  margin-left: 10px;
}
.inside-one a:hover img {
  margin-left: 20px;
  transition: 0.8s ease;
}
/*End css of Insude Ar section*/


/*This css is About Us page*/


.about-title {
  display: flex;
  justify-content: center;
  border-top: 1px solid #444444;
  border-bottom: 1px solid #444444;
  padding: 74px 0px 74px 0px;
}

.about-title h1 {
  font-size: 85px;
  font-weight: normal;
}
.about-subtitle {
  display: flex;
  justify-content: center;
}
.project-c h2 {
  position: relative;
}
.project-c h2:after {
  content: "+";
  position: absolute;
}
.brand-title {
  width: 1638px;
  display: flex;
  margin: 91px 0px 91px 0px;

}
.brand-title h2 {
  font-size: 55px;
  font-weight: normal;
  padding-right: 165px;
  line-height: 62px;
}
.brand-title p {
  font-size: 24px;
  font-weight: normal;
  padding-right: 138px;
  line-height: 42px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  letter-spacing: 0.58px;
}
.sign img {
  max-width:250px;
  height:auto;
  padding:45px 0 0;
}
.brand-heading, .brand-subtext {
  width: 50%;
}
.vision-img-tab {
  display: flex;
  justify-content:center;
}
.vision-text {
  width: 595px;
  height: auto;
  margin-left: 93px;
  margin-top: 25px;
}
.vision-img {
  position: relative;
}
.vision-img img{
  filter: grayscale(100%);
}
.vision-img:hover img{
  filter: grayscale(0);
}
.vision-img:after {
  position: absolute;
  content: "";
  background: #00000070;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display:none;
}
.vision-text h2 {
  font-size: 55px;
  font-weight: normal;
  line-height: 65px;
  padding-right: 185px;
}
.vision-text p {
  font-size: 20px;
  line-height: 30px;
  padding-right: 85px;
  margin-top: 25px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  letter-spacing: 0.58px;
}
.project-details-wrap {
  display: flex;
  justify-content: center;
}
.project-tab {
  width: 1278px;
  margin-top: 76px;
  margin-bottom: 100px;
  display: flex;
  justify-content: space-between;
}
.project-c h2 {
  font-size: 100px;
  line-height: 132px;
  font-weight: normal;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.project-c p {
  font-size: 17px;
  letter-spacing: 1.5px;
  text-align: center;
}
.get-heading {
  border-top: 1px solid #444444;
  border-bottom: 1px solid #444444;
  padding: 96px 0px 96px 0px;
}
.get-heading h2 {
  font-size: 55px;
  font-weight: normal;
  line-height: 65px;
  letter-spacing: 3.5px;
  text-align: center;
}
.team-tab {
  width: 1638px;
}
.team-details-wrap {
  display: flex;
  justify-content: center;
  border-bottom:1px solid #444444;
}
.team-tab .item img{
  filter: grayscale(100%);
}
.team-tab .item:hover img{
  filter: grayscale(0);
}
.Team-one {
  position: relative;
}
.Team-one:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  background:#000000;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  display:none;
}
.overlay-text h3 {
  font-size: 26px;
  font-weight: normal;
  font-family: 'Neue Haas Grotesk Display Pro 55 Roman';
  letter-spacing: 1.95px;
}
.overlay-text p {
  font-size: 15px;
  margin-top: 5px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.overlay-text {
  content: " ";
  position: absolute;
  left: 50px;
  bottom: -50px;
  z-index: 2;
}
.team-wrap {
  padding: 30px 0px 30px 0px;
}
.Team-one:hover .overlay-text {
  bottom: 50px;
  transition: 0.3s linear;
}
.Team-one:hover:after {
  opacity: 0;
  transition: 0.5s linear;
} 
.team-wrap .owl-dots {
  display: none;
}
.team-tab .owl-nav {
  position: absolute;
  top: 50%;
  left: 0px;
  z-index: 5;
  width: 100%;
  transform: translateY(-50%);
}
.team-tab button.owl-prev {
  float: left;
  width: 75px;
    height: 75px;
    border: 1px solid #565353 !important;
    border-radius: 40px !important;
}
.team-tab button.owl-prev .fa-long-arrow-alt-left {
  font-size: 25px;
  color: #565353;
}
.team-tab button.owl-next .fa-long-arrow-alt-right {
  font-size: 25px;
  color: #fff;
}
.team-tab button.owl-next {
  float: right;
  width: 75px;
  height: 75px;
  border: 1px solid #fff !important;
  border-radius: 40px !important; 
}
.team-tab .owl-theme .owl-nav [class*=owl-] {
  margin-left: -110px;
}
.team-tab .owl-theme .owl-nav .owl-next {
  margin-right: -110px;
}
.team-tab button.owl-prev:hover {
  border: 1px solid #fff !important;
  background: transparent;
  transition: 0.5s ease;
}
.team-tab button.owl-prev:hover .fa-long-arrow-alt-left {
  color: #fff;
  transition: 0.5s ease;
}
.team-tab .owl-theme .owl-nav [class*=owl-]:hover {
  background: transparent;
}
.profile-wrap {
  width: 1638px;
  display: flex;
  padding: 50px 0px 80px 0px;
}
.profile-tab {
  display: flex;
  justify-content: center;
}
.profile-img {
  position: relative;
  width:50%;
}
.profile-img img {
  filter: grayscale(100%);  
}
.profile-img:hover img {
  filter: grayscale(0);  
}
.profile-img:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background: #000;
  z-index: 5;
  display:none;
}
.profile-img:hover:after {
  opacity: 0;
  transition: 0.5s ease;
}
.profile-text {
  width:50%;
  margin: 97px 0px 0px 100px;
}
.profile-text h2 {
  font-size: 55px;
  line-height: 65px;
  font-weight: normal;
}
.profile-text p {
  font-size: 18px;
  line-height: 30px;
  margin: 15px 0px 0px 0px;
  padding-right: 130px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
/*End css of About us page*/ 


/*This css Start What we do page*/
.what-we-detail {
  display: flex;
  justify-content: center;
  position:relative;
}
.with-ambitions{
  margin-bottom:120px;
}
.what-tab {
  width: 1638px;
  display: flex;
  margin-top: 140px;
}
.what-text h2 {
  font-size: 55px;
  line-height: 65px;
  font-weight: normal;
  padding-right: 275px;
}
.what-text p {
  font-size: 24px;
  line-height: 42px;
  letter-spacing: 0.58px;
  padding-right: 205px;
  margin-top: 30px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.brand-one {
  width: 748.5px;
  height: 848px;
  border: 1px solid #444444;
  padding-bottom: 100px;
  position: relative;
  
}
.brand-one:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  background: transparent linear-gradient(41deg, #FF9A9A 0%, #FAD0C4 100%) 0% 0%;
}
.brand-one:hover:after {
  opacity: 1;
  transition: 0.5s;
}
.brand-one.brand-two:after {
  opacity: 0;
  background: transparent linear-gradient(41deg, #667EEA 0%, #764BA2 100%) 0% 0% no-repeat padding-box;
}
.brand-one.brand-two:hover:after {
  opacity: 1;
  transition: 0.5s;
}
.brand-one.brand-three:after {
  opacity: 0;
  background: transparent linear-gradient(41deg, #2AF598 0%, #009EFD 100%) 0% 0% no-repeat padding-box;
}
.brand-one.brand-three:hover:after {
  opacity: 1;
  transition: 0.5s;
}
.brand-one.brand-four:after {
  opacity: 0;
  background: transparent linear-gradient(41deg, #0470DC 0%, #13F1FC 100%) 0% 0% no-repeat padding-box;
}
.brand-one.brand-four:hover:after {
  opacity: 1;
  transition: 0.5s;
}
.brand-one.brand-two, .brand-one.brand-four {
  margin-top: -550px;
}
.what-text {
  width: 50%;
}
.what-text {
  margin-top: 20px;
}
.brand-one img {
  float: right;
  margin: 45px 45px 0px 0px;
  opacity: 0.02;
}
.brand-one:hover>img {
  opacity: 1;
  transition: 0.5s;
}
.what-list {
  margin-top: 40px;
  position: relative;
}
.what-list ul {
  list-style: none;
}
.brand-text {
  padding: 409px 0px 0px 70px;
}
.brand-text p {
  font-size: 24px;
  font-weight: normal;
  line-height: 32px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.brand-text h3 {
  font-size: 42px;
  line-height: 55px;
  font-weight: 500;
  padding: 10px 0px 10px 0px;
  position: relative;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  letter-spacing: 0.76px;
}
.brand-text h3:after {
  content: "What We Do";
  position: absolute;
  bottom: -50px;
  left: 0;
  z-index: 1;
}
.brand-text .p-tab {
  font-size: 18px;
  line-height: 26px;
  padding-right: 370px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  letter-spacing: 0.18px;
}
.what-list li {
  font-size: 21px;
  line-height: 23px;
  padding-top: 10px;
  letter-spacing: 0.94px;
}
.view-tab a {
  font-size: 18px;
  line-height: 26px;
  display: flex;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 0.32px;
}
.view-tab a i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.view-tab a .fas {
  font-size: 14px;
  margin-left: 15px;
}
.view-tab {
  position: absolute;
  right: 75px;
  bottom: 0;
}
.brand-text h3 span {
  position: relative;
  bottom: 0;
  left: 0;
}
.brand-one:hover .brand-text h3 span {
  bottom: 70px;
  transition: 0.5s ease;
} 
.brand-one:hover .brand-text h3:after {
  bottom: 10px;
  transition: 0.5s;
} 
.brand-one:hover .view-tab a i {
  width: 40px;
  height: 40px;
  transition: 0.5s;
}
.brand-one:hover .view-tab a .fas {
 font-size: 20px;
 transition: 0.5s;

}
.brand-three, .brand-five {
  margin-left: 70px;
}
.ambitions-text {
  /*display: flex;
  justify-content: center;
  margin-top: -225px;
  padding-bottom:125px;*/
  position: absolute;
  bottom: 0;
  /*z-index: -1;*/
}
.ambition-btn {
  width: 1638px;
}
.ambition-heading {
  width: 50%;
}
.ambition-heading h2 {
  font-size: 55px;
  line-height: 65px;
  letter-spacing: 3.3px;
  font-weight: normal;
  padding-right: 215px;
  margin-bottom: 60px;
}
.ambition-heading a {
  /*font-size: 18px;
  border: 1px solid #444444;
  border-radius: 27px;
  padding: 18px 43px;
  position: relative;
  line-height: 24px;
  overflow: hidden;*/
  /*margin-top: 50px;*/
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
/*.ambition-heading a i {
  margin-left: 15px;
}*/
/*.ambition-heading a>span {
  position: relative;
  bottom: 0px;
  left: 0;
}*/
/*.ambition-heading a span:after {
  content: "Explore now!";
  position: absolute;
  bottom: 0;
  left: 0;
}*/

/*End What we do page*/


/*This css start 0f recent page*/
.recent-wrap {
  display: flex;
  justify-content: center;
}
.recent-tab {
  width: 1638px;
  
}
.recent-tab .carlijnq-tab {
  width: 526px;
  border: 1px solid #444444;
}
.recent-tab .carlijnq-tab:hover {
  border-color: transparent;
}
.recent-tab .product-tab {
  display: flex;
  justify-content: space-between;
}
.recent-tab .carlijnq-tab>img {
  width: 100%;
  height: 100%;
  position:absolute;
  -webkit-object-fit: cover;
  object-fit: cover;
}
.recent-wrap .recent-tab {
  margin-top: 30px;
}
.recent-wrap .recent-tab.product-one {
  margin: 150px 0px 0px 0px;
}
.load-more-btn a  {
  display: flex;
  align-items: center;
  letter-spacing: 0.3px;
  line-height: 24px;
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.load-more-btn a img {
  margin-right: 10px;
}
.load-btn {
  display: flex;
  justify-content: center;
  margin: 60px 0px 60px 0px;
}
.load-more-btn a:hover img {
  transform: rotate(90deg);
  transition: 0.5s;
}
/*This end css of recent page*/


/*this css start of blog write page*/
.content-img-wrap {
  display: flex;
  justify-content: center;
}

.content-img {
  width: 1638px;
  position: relative;
  margin: 141px 0px;
}
.content-img img {
  position: relative;
  
}
.content-img>img {
  opacity: 0.4;
}
.content-img:hover>img {
  opacity: 1;
  transition: 0.5s;
}

.img-text {
  content: "";
  position: absolute;
  bottom: 0;
  left: 110px;
  z-index: 2;
  background: #000;
  width: 865px;
  height: 425px;
  padding: 50px;
}
.img-text p {
  font-size: 21px;
  line-height: 33px;
  letter-spacing: 0.44px;
  padding-right: 195px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.img-text p:first-child {
  display: flex;
  align-items: center;
  font-size: 21px;
  letter-spacing: 0.34px;

}
.img-text h2 {
  font-size: 50px;
  letter-spacing: 3px;
  line-height: 60px;
  font-weight: normal;
  padding-right: 115px;
  margin: 20px 0px;
}

.img-text p:first-child img {
  margin-right: 10px;
}
.img-text a  {
  display: flex;
  margin-top: 25px;
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}
.img-text a img {
  margin-left: 10px;

}
.img-text a:hover img {
  margin-left: 17px;
  transition: 0.5s;
}
.blog-tab {
  display: flex;
  justify-content: center;
  padding-bottom:80px;
}
.blog-product {
  width: 1638px;
}
.blog-product .inside-product {
  /*background: #000;*/
}
.blog-product .inside-one {
  border:1px solid #444444;
  height: 620px;
}
.blog-product .inside-one p {
  padding-left: 30px;
  color: #fff;
}
.blog-product .inside-one a {
  padding-left: 30px;
}
.blog-pr {
  margin-top: 30px;
}
/*End css of blog write page*/ 

/*This css start of Contact page*/
.contact-wrap {
  display: flex;
  justify-content: center;
  margin: 141px 0px;
}
.contact-tab {
  width: 1638px;
  display: flex;
}
.contact-text {
  width: 50%;
}
.contact-form{
  width:50%;
  padding-left:150px;
}
.contact-form select{
    background: #0f0f0f;
    color: #fff;
    border: 1px solid #444444;
    padding: 10px 20px;
    border-radius: 43px;
    height: 55px;
    width: 100%;
    outline: none !important;
    margin-bottom:25px;
}
.contact-form select option{
    padding: 10px 20px;
}
.category-tab{
  margin-top:0px;
}
.contact-text h2 {
  font-size: 55px;
  line-height: 65px;
  letter-spacing: 3.5px;
  font-weight: normal;
  padding-right: 105px;
}
.contact-text p {
  font-size: 24px;
  letter-spacing: .58px;
  line-height: 42px;
  padding-right: 200px;
  margin: 30px 0px 70px 0px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.contact-form input {
  width: 665px;
  height: 75px;
  background: #0f0f0f;
  border: 1px solid #444444;
  border-radius: 43px;
  margin-bottom: 25px;
  padding: 20px;
  color:#ffffff;
  position:relative;
  outline: none !important;
}
.contact-form .first-nm{
  content: "";
  background: url(../img/user.svg) no-repeat;
  background-position: 22px center;
  padding-left: 55px;
  background-size: 20px;
}
.contact-form .first-nm:focus{
  content: "";
  background: url(../img/user-white.svg) no-repeat;
  background-position: 22px center;
  padding-left: 55px;
  background-size: 20px;
}
.contact-form .mail-nm{
  content: "";
  background: url(../img/email-gray.svg) no-repeat;
  background-position:22px center;
  padding-left: 55px;
  background-size: 20px;
}
.contact-form .mail-nm:focus {
  content: "";
  background: url(../img/email-white.svg) no-repeat;
  background-position: 22px center;
  padding-left: 55px;
  background-size: 20px;
}
.contact-form .mobile-nm{
  content: "";
  background: url(../img/mobile.svg) no-repeat;
  background-position: 22px center;
  padding-left: 55px;
  background-size: 20px;
}
.contact-form .mobile-nm:focus{
  content: "";
  background: url(../img/mobile-white.svg) no-repeat;
  background-position: 22px center;
  padding-left: 55px;
  background-size: 20px;
}
.contact-form .tell-us-about{
  content: "";
  background: url(../img/comment.svg) no-repeat;
  background-position: 22px 22px;
  padding-left: 55px;
  background-size: 15px;
  resize: none;
  outline: none !important;
  margin-bottom:25px;
}
.contact-form .tell-us-about:focus {
  content: "";
  background: url(../img/comment-white.svg) no-repeat;
  background-position: 22px 22px;
  padding-left: 55px;
  background-size: 15px;
}
.category-tab p {
  font-size: 24px;
  line-height: 34px;
  letter-spacing: 0.82;
}
.category-block {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
}
.category-tab input {  
  background: url("../img/White-icn-arrow.png") no-repeat;
  background-position:370px center;
  background-size:20px;
  padding: 20px 25px;
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
  letter-spacing: 0.18px;
  border-radius: 44px;
  margin:0 15px 15px 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  cursor:pointer;
  height:auto !important;
}
.category-tab input:hover{
  background:#ffffff url("../img/icn-arrow.png") no-repeat;
  background-position:370px center;
  background-size:20px;
  color:#0f0f0f;
}
.category-tab input:hover::before {
    content: "";
    border: 1px solid #ffffff;
    position: absolute;
    border-radius: 50px;
    top: 8px;
    right: -8px;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: transform 0.5s ease-out;
}
/*.category-tab a:nth-child(2) {
  margin: 0px 48px;
}*/
.category2 {
  margin-top: 55px;
}
.category-tab textarea {
  width: 665px;
  height: 265px;
  background: #0f0f0f;
  border: 1px solid #444444;
  border-radius: 25px;
  padding: 20px;
  margin-top: 0;
  color:#ffffff;
}
.category-tab button {
  display: block;
  width: 665px;
  border: 1px solid #ffffff;
  color: #fff;
  font-size: 20px;
  border-radius: 44px;
  height: 75px;
  background: #0f0f0f;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  cursor:pointer;
}
.category-tab button img {
  margin-left: 25px ;
}
.category-tab button:hover img {
  transform: rotate(45deg);
  transition: 0.5s;
}


/*End css of Contact page*/


/*This css start of brand identity page*/
.brand-identitytitle {
  display: flex;
  justify-content: center;
  margin: 141px 0px;
}
.brand-identitytext {
  width: 1638px;
}
.brand-identitytext h2 {
  font-size: 55px;
  font-weight: normal;
  line-height: 65px;
}
.brand-identitytext p {
  font-size: 24px;
  letter-spacing: 0.58px;
  line-height: 42px;
  margin-top: 30px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.identity-tab img {
  width: 100%;
  height: auto;
  opacity: 0.4;
}
.identity-tab:hover img {
  opacity: 1;
  transition: 0.5s;
}
.our-heading-text {
  display: flex;
  justify-content: center;
}
.our-text {
  width: 1638px;
}
.our-text h2 {
  font-size: 55px;
  line-height: 65px;
  font-weight: normal;
  letter-spacing: 3.58px;
  margin: 140px 0px 30px 0px;
}
.our-text p {
  font-size: 24px;
  line-height: 42px;
  letter-spacing: 0.58px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.process-circle h2, .Capabilities-tab h2 {
  font-size: 55px;
  line-height: 65px;
  letter-spacing: 3.58px;
  font-weight: normal;
}
.process-circle {
  width: 1638px;
}
.process-tab {
  display: flex;
  justify-content: center;
  margin: 140px 0px 115px 0px;
}
.circle-text p {
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 0.58px;
}
.circle-wrap {
  display: flex;
  margin-top: 169px;
  margin-left: 109px;
}
.define-circle {
  width: 235px;
  height: 235px;
  border-radius: 50%;
  background: #1B1B1B;
  position: relative;
}
.define-circle p {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.analyze-circle {
  width: 263px;
  height: 263px;
  border-radius: 50%;
  background: #1B1B1B;
  position: relative;
}
.analyze-circle p {
  content: "";
  position: absolute;
  top: 50%;
  left: 39%;
  z-index: 1;
  transform: translate(-37%, -50%);
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.begin-circle {
  width: 292px;
  height: 292px;
  border-radius: 50%;
  background: #1B1B1B; 
  position: relative;
}
.begin-circle p {
  content: "";
  position: absolute;
  top: 50%;
  left: 51%;
  z-index: 1;
  transform: translate(-51%, -50%);
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.start-circle {
  width: 630px;
  height: 630px;
  border-radius: 50%;
  background: #1B1B1B;
  margin-top: -170px;
  position: relative;
}
.start-circle p:first-child {
  position: absolute;
  top: 50%;
  right: 0%;
  z-index: 10;
  transform: translate(-61%, -50%);
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;

}
.sub-circle {
  content: "";
  position: absolute;
  top: 50%;
  left: 26%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 332px;
  height: 331px;
  background: #0F0F0F;
  border-radius: 50%;
}
.sub-circle p {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
}
.Capabilities-wrap {
  display: flex;
  justify-content: center;
}
.Capabilities-tab {
  width: 1638px;
}
.Capabilities-list {
  margin-top: 75px;
}
.Capabilities-list li {
  width: 409px;
  height: 140px;
  border: 1px solid #444444;
  font-size: 21px;
  line-height: 36px;
  letter-spacing: 0.5px;
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.Capabilities-list li div {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  margin-right: 10px;
}
.Capabilities-list ul {
  display: flex;
}
.explore-recent-work {
  display: flex;
  justify-content: center;
}
.explore-tab {
  width: 1638px;
}
.explore-tab .product-tab {
  display: flex;
  justify-content: space-between;
  padding-bottom:100px;
}
.explore-tab .product-tab .carlijnq-tab{
  height:100% !important;
  margin: 0 30px 0 0;
  overflow: hidden;
}
.explore-tab .product-tab .carlijnq-tab:last-child{
  margin-right:0px;
}
.explore-tab .carlijnq-tab {
  width: 100%;
  height: auto;
  border: 1px solid #444444;
}
.explore-tab .carlijnq-tab:hover {
  border-color:transparent;
}
.explore-tab .our-heading a {
  /*margin-left: 872.2px;*/
}
.explore-tab .carlijnq-tab>img {
  width: 100%;
  height: 100%;
  position:absolute;
  object-fit:cover;
}

/*End css of brand identity page*/

/*This css start of Amsterdam page*/
.amsterdam-wrap {
  display: flex;
  justify-content: center;
}

.amsterdam-title {
  width: 1638px;
  display: flex;
  margin: 90px 0px 70px 0px;
}
.amsterdam-text, .amsterdam-subtext {
  width: 50%;
}
.amsterdam-text h2 {
  font-size: 85px;
  font-weight: normal;
  line-height: 75px;
  letter-spacing: 5.53px;
}
.amsterdam-text p {
  padding-right: 145px;
  margin-top: 10px;
}
.amsterdam-subtext p  {
  padding-right: 115px;
}
.amsterdam-text p, .amsterdam-subtext p {
  font-size: 24px;
  line-height: 42px;
  letter-spacing: 0.58px;
  font-family: 'Roboto', sans-serif;
}
.amsterdam-img, .brand-design-wrap {
  display: flex;
  justify-content: center;
}
.amsterdam-tab, .brand-design {
  width: 1638px;
}
.brand-design {
  margin: 100px 0px;
}
.brnad-design-text h2 {
  font-size: 55px;
  line-height: 65px;
  letter-spacing: 3.58px;
  font-weight: normal;
}
.brnad-design-text {
  padding: 136px 0px 0px 124px;

}
.brnad-design-text p {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.4px;
  margin-top: 25px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.brand-textdetails {
  display: flex;
}
.brnad-design-text a {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.34px;
  display: flex;
  align-items: center;
  margin-top: 36px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  margin-bottom:30px;
}

.brnad-design-text a img {
  margin-left: 10px;
}
.brnad-design-text a:hover img {
  margin-left: 20px;
  transition: 0.5s;
}
.brand-system-text {
  padding: 136px 0px 0px 0px;
}
.brand-desing-text {
  margin-top: -3px;
}
.brand-slider-wrap {
  display: flex;
  justify-content: center;
}
.brand-slider-tab {
  width: 1638px;
}
.slider {
  position: relative;
  width: 100%;
}

.brand-slider-tab .items {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 56.25%;
}

.brand-slider-tab .item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.brand-slider-tab .item.current {
  opacity: 1;
}
.brand-slider-tab .item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.buttons {
  position: absolute;
  z-index: 1;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
}

.button {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  outline: none;
  padding: 0;
  background: #666;
  cursor: pointer;
  display: block;
}

.button:hover {
  opacity: 1;
  background: #fff;
  transition: 0.5s;
}

.dots {
  position: absolute;
  top: 43px;
  left: 100%;
  width: 100%;
  justify-content: center;
  margin-top: 10px;
  transform: translate(-50%, 0px);
}

.dot {
  display: block;
  width: 3px;
  height: 125px;
  border: none;
  outline: none;
  padding: 0;
  background: #fff;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.4s ease-in-out;
}

.dot.current {
  opacity: 1;
}
.slider-btn {
  position: absolute;
  top: 57px;
  right: 30px;
  width: 125px;
  height: 725px;
  background: #000;
  z-index: 2;
}
.slider-btn .buttons .fas {
  font-size: 23px;
}
.slider-btn .prev i {
  transform: rotate(90deg);
}
.slider-btn .button.next {
  margin-top: 10px;
  background: #fff;
}
.slider-btn .next i {
  transform: rotate(90deg);
}
.pre-project-btn a {
  border: 1px solid #fff;
  padding: 20px 44px;
  border-radius: 45px;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.pre-project-btn a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  border-radius: 45px;
  z-index: 1;
}
.pre-project-btn a[href="javascript:void(0);"]{
    cursor: not-allowed;
    opacity:0.5;
}
.pre-project-btn a:nth-child(1) img {
  margin-right: 15px;
  vertical-align: middle;
}
.pre-project-btn a:hover:nth-child(1) img {
  transform: rotate(-45deg);
  transition: 0.5s;
}
.pre-project-btn a:hover:nth-child(2) img {
  transform: rotate(45deg);
  transition: 0.5s;
}
.pre-project-btn a:nth-child(2) {
  background: #fff;
  color: #000;
  margin-left: 15px;

}
.pre-project-btn a:nth-child(2) img {
  margin-left: 15px;
  vertical-align: middle;
}
.pre-project-btn {
  display: flex;
  justify-content: center;
  margin: 70px 0px;
}
/*End css of Amsterdam page*/


/*This css start of blog subdatails page*/


.blog-wrap {
  display: flex;
  justify-content: center;
}
.blog-heading {
  width: 1638px;
  display: flex;
  margin: 70px 0px 50px 0px;
  justify-content: space-between;
}
.blog-title img {
  margin-right: 10px;
}
.blog-title p {
  font-size: 21px;
  line-height: 28px;
  letter-spacing: 0.36px;
  display: flex;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.blog-title h2 {
  font-size: 50px;
  line-height: 60px;
  font-weight: normal;
  letter-spacing: 3px;
}
.blog-social-icon a {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.blog-social-icon a img {
  margin-right: 15px;
}
.blog-social-icon {
  display: flex;
  margin: 100px 0px 0px 0px;
  width: auto;
}
.blog-social-icon a:nth-child(2) {
  margin-left: 35px;
}
.blog-social-icon a:nth-child(3) {
  margin-left: 35px;
}
.blog-images, .blog-text-details {
  display: flex;
  justify-content: center;
}
.blog-subtext {
  width: 1082px;
  margin: 70px 0px 70px 0px;
}
.blog-subtext p, .blog-bl-text p {
  font-size: 24px;
  line-height: 42px;
  letter-spacing: 0.58px;
  font-family: 'Roboto', sans-serif;
}
.blog-bl-text p {
  padding-left: 35px;
  border-left: 3px solid #fff;
}
.blog-subtext p:nth-child(2), .blog-subtext p:nth-child(3), .blog-subtext p:nth-child(5), .subtext  {
  margin-top: 50px;
}
.blog-bl-text {
  background: #272727;
  padding: 50px 80px;
  margin: 50px 0px;
}
.related-blog {
  display: flex;
  justify-content: center;
  border-top:1px solid #444444;
}
.related-blog .our-heading h1 {
  color: #fff;
}
.related-blog .our-heading {
  display: flex;
  justify-content: space-between;
}
.related-blog .our-heading a {
  /*margin-left: 927px;*/
}
.related-blog .inside-product {
  /*background: #000;*/
}
.related-blog p.blog-details {
  color: #fff;
}
.related-blog .inside-product p, .related-blog .blog-details {
  margin-left: 30px;
}
.related-blog .inside-one a {
  margin-left: 30px;
}
.related-blog .inside-one {
  height: 616px;
  border: 1px solid #444444;
}
.related-blog {
  margin-bottom: 100px;
}
.second-social-media {
  display: flex;
  margin-top: 30px;
}
.second-social-media a {
  display: flex;
  align-items: center;
  margin-left: 25px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.second-social-media a img {
  margin-right: 13px;
}

/*End css of blog subdetails page*/


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    transition: all 0.4s;
    line-height: 0;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #0f0f0f;
}

.back-to-top img {
    transform: rotate(-90deg);
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    padding: 9px 0;
    width: 20px;
}

.back-to-top:hover {
  background: #dddddd;
}

.top-left-bg{
  position:relative;
}
.top-left-bg:before{
  content: "";
  top: -117px;
  left: -150px;
  width: 738px;
  height: 738px;
  position:absolute;
  background: transparent radial-gradient(closest-side at 50% 50%, #ED1C24 0%, #770E12 100%) 0% 0% no-repeat padding-box;
  opacity: 0.05;
  filter: blur(50px);
  z-index:-1;
}
.left-center-bg{
  position:relative;
}

.left-center-bg:before{
  content: "";
  top: 150px;
  right: 0;
  width: 738px;
  height: 738px;
  position:absolute;
  background: transparent radial-gradient(closest-side at 50% 50%, #ED1C24 0%, #770E12 100%) 0% 0% no-repeat padding-box;
  opacity: 0.05;
  filter: blur(50px);
  z-index:-1;
}

/*.stickytop {*/
/*     animation: smoothScroll 1s alternate;*/
/*     -webkit-animation: smoothScroll 1s alternate;*/
/*}*/
 .stickytop {
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 999;
     box-shadow:0 3px 10px rgba(0,0,0,0.20);
     /*transition: all 1s ease-out 0s;*/
     background:rgba(0,0,0,0.75);
}
/* @-webkit-keyframes smoothScroll {*/
/*     0% {*/
/*         -webkit-transform: translateY(-40px);*/
/*         transform: translateY(-40px);*/
/*    }*/
/*     100% {*/
/*         -webkit-transform: translateY(0px);*/
/*         transform: translateY(0px);*/
/*    }*/
/*}*/
/* @keyframes smoothScroll {*/
/*     0% {*/
/*         transform: translateY(-40px);*/
/*    }*/
/*     100% {*/
/*         transform: translateY(0px);*/
/*    }*/
/*}*/

section.home-page{
 background:#0f0f0f;   
}
section.home-page.stickytop{
    background:rgba(0,0,0,0.75);
}

.contact-form input:-internal-autofill-selected {
    background-image: none !important;
    background: #0f0f0f !important;
    background-color: #0f0f0f !important;
    
}
#contact-form .messages .alert-success{
    background: green;
    color: #ffff;
    padding: 15px;
    margin-bottom: 40px;
    border-radius: 5px;
    letter-spacing: 0.5px;
}

/* form validation css */

.has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
    color: #a94442;
}
.help-block {
    display: block;
    margin-top: 0;
    margin-bottom: 10px;
    color: #737373;
    position: relative;
    top: -15px;
    left: 25px;
    font-size: 12.5px;
    letter-spacing: 2px;
}

/* Video CSS */
#videowrap{
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 999;
    display:none;
}
#fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

#light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*max-width: 600px;*/
  /*max-height: 360px;*/
  /*margin-left: -300px;*/
  /*margin-top: -180px;*/
  border: 0px solid #FFF;
  z-index: 1002;
  overflow: visible;
}

#videowrap video{
    border:2px solid #222222;
    border-radius:10px;
}
#boxclose {
  float: right;
  cursor: pointer;
  color: #fff;
  border: 1px solid #616161;
  border-radius: 50%;
  background: #222222;
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 14px 6px;
  position: absolute;
  right: -15px;
  top: -15px;
  z-index: 1002;
  opacity: 0.9;
}
#boxclose:hover{
 color: #222222;
  border: 1px solid #616161;
  border-radius: 50%;
  background: #ffffff;   
}

.boxclose:before {
  content: "×";
}

#fade:hover ~ #boxclose {
  display:none;
}