@font-face {
    font-family: gilroy;
    src: url('fonts/Gilroy-Medium.ttf') format('truetype');
    font-weight: 500;
  }
  @font-face {
    font-family: gilroy-bld;
    src: url('fonts/Gilroy-Medium.ttf') format('truetype');
    font-weight: 500;
   
  }
  

  @font-face {
    font-family: mazius;
    src: url('fonts/Mazius-Extraitalic.121a71a7.otf');
    font-weight: 500;
    
  }
  @font-face {
    font-family: gilroy-lt;
    src: url('fonts/Gilroy-Light.ttf');
  }
  @font-face {
    font-family: mons;
    src: url('fonts/Montserrat-Black.ttf');
  }
  
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    font-family: gilroy;
}

/* ------------------ */
/* |      Main      | */ 
/* ------------------ */

#main{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #FCFAF8;
}

/* ------------------ */
/* |      Loader    | */ 
/* ------------------ */

#loader{   
    width: 100%;
    height: 100vh;
    color: #fff;
    background-color: #333;
    position: fixed;
    z-index: 9999;
}

#loader #topheading{
    position: absolute;
    top: 5%;
    left: 50%;
    padding: 0vw 4vw;
    transform: translate(-50%, 0);
}

#topheading h2{
    text-align: center;
    font-size: 0.8rem;
    font-weight: 200;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

#loader h2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6vw;
    font-weight: 600;
    width: 100%;
    display: flex;
    justify-content: center;
    letter-spacing: 0.1rem;
}

.reveal .parent {
    display: flex;
    /* width: 100%; */
    justify-content: center;
    overflow-y: hidden;
    overflow-x: hidden;
}

.reveal .parent .child{
    display: block;
}

.child span {
    display: inline-block;
}

#loader #safi{
    font-family: mazius;
    color: #14CF93;
}
/* ------------------ */
/* |    LightBlue   | */ 
/* ------------------ */

#lightblue{
    width: 100%;
    position: absolute;
    top: 100%;
    height: 0vh;
    background-color: #14CF93
    
}


#black{
    width: 100%;
    position: absolute;
    top: 100%;
    height: 0vh;
    background-color: #333;
}


/* ------------------ */
/* |      Home      | */ 
/* ------------------ */

#home{
    width: 100%;
    background-color: #FCFAF8;
}

/* header{
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid #e3e4e9;
  position: fixed;
  z-index: 999999;
} */


/* ------------------ */
/* |      NAV       | */ 
/* ------------------ */
/* 
header #nav {
  position: relative;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 5vw;
  height: 70px;
  background-color: #FFFFFF;
}

#nav a {
  position: relative;
  z-index: 998;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 1.5px;
  color: #3c3c3c;
  opacity: 1;
}

#nav a .line {
  display: inline-block;
  height: 1px;
  background-color: #3c3c3c;
  position: absolute;
  bottom: 0;
}

#line-1 {
  left: 0;
  width: 0%;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.1s 1s;
}

#line-2 {
  right: 0;
  width: 100%;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
}

#nav a:hover #line-1 {
  width: 100%;
}

#nav a:hover #line-2 {
  width: 0;
} */

header{
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid #e3e4e9;
  position: fixed;
  z-index: 999999;
}

header #nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  height: 70px;
}

#nav a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  display: inline-block;
  color: #fff;
}

.nav-links {
  display: flex;
  width: 80%;
  align-items: center;
  justify-content: space-between;
}



/* Hamburger button */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #000;
  border-radius: 3px;
}

/* Responsive part */
@media (max-width: 998px) {
  .nav-links {
    padding: 4vw 0vw;
    display: none;
    position: absolute;
    top: 70px;
    right: 0;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    background-color: #14CF93;
    text-align: center;
  }

  .nav-links a {
    padding: 1.6vw  4vw;
  }

  .hamburger {
    display: flex;
  }

  .nav-links.active {
    display: flex;
  }

  .btn-12{
    padding: 0vw 4vw;
  }

  
}

/* header btn */

/* From Uiverse.io by doniaskima */ 
.btn-12,
.btn-12 *,
.btn-12 :after,
.btn-12 :before,
.btn-12:after,
.btn-12:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-12 {
  -webkit-tap-highlight-color: transparent;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}

.btn-12:disabled {
  cursor: default;
}

.btn-12:-moz-focusring {
  outline: auto;
}

.btn-12 svg {
  display: block;
  vertical-align: middle;
}

.btn-12 [hidden] {
  display: none;
}

.btn-12 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}

.btn-12 span {
  mix-blend-mode: difference;
}

.btn-12:after,
.btn-12:before {
  background: linear-gradient(
    90deg,
    #fff 25%,
    transparent 0,
    transparent 50%,
    #fff 0,
    #fff 75%,
    transparent 0
  );
  content: "";
  inset: 0;
  position: absolute;
  transform: translateY(var(--progress, 100%));
  transition: transform 0.2s ease;
}

.btn-12:after {
  --progress: -100%;
  background: linear-gradient(
    90deg,
    transparent 0,
    transparent 25%,
    #fff 0,
    #fff 50%,
    transparent 0,
    transparent 75%,
    #fff 0
  );
  z-index: -1;
}

.btn-12:hover:after,
.btn-12:hover:before {
  --progress: 0;
}




  

/* ------------------ */
/* | Section Intro  | */ 
/* ------------------ */


#home{
  width: 100%;
}

.slider_height_fix {
  width: 100%;
  padding-bottom: 1vw;
  background-color: #FCFAF8;
}
.slider-heading{
  padding: 2vw 4vw;
  text-align: center;
  font-family: mons;
  background-color: #FCFAF8;
}

.slider-heading h4{
  color: #333333;
  font-size: 4vw;
}
.slider-heading span{
  font-family: mazius;
  color: #14CF93;
}

/* Slider */
.slider{
  width: 100%;
  padding: 4vw 4vw 4vw 4vw;
  overflow: hidden;
  overflow: hidden; 
  min-height: auto;
}

		*, *::before, *::after {
			box-sizing: border-box;
		}
		img {
			-ms-interpolation-mode: bicubic;
			border: 0;
		}
/* ============ Full Page Slider ================= */
.cs-photography--slider {
	position: relative;
	padding: 0px 0px;
	overflow: hidden;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 2vw;
}
.swiper-container {
	position: relative;
	overflow: hidden;
  background-color: #FFFFFF;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.cs-photography--slider .cs-slider--item {
	position: relative;
	overflow: hidden;
  background-color: #FFFFFF;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.cs-slider--item .cs-slider--image{
	background-position: 50%;
	background-repeat: no-repeat;
  background-color: #FFFFFF;
	background-size: cover;
  overflow: hidden;
	width: 50%;
	-webkit-transition: all 2s linear;
	-moz-transition: all 2s linear;
	transition: all 2s linear;
	-webkit-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
}
.cs-slider--image img{
  width: 85%;
  filter: grayscale(100%);
  overflow: hidden;
}
#ht-fix{
  padding-top: 1.2vw;
}

.cs-slider--item .cs-slider--inner {
	display: flex;
  width: 50%;
	align-items: center;
  background-color: #14CF93;
	justify-content: center;
	overflow: hidden;
  height: auto;
}
.cs-slider--inner .cs-item-layer{
	z-index: 0;
}
.cs-item-layer img{
	width: 100%;
}
.cs-photography--slider .swiper-slide-active .cs-slider--image {
	-webkit-transform: scale(1.01);
	-ms-transform: scale(1.01);
	transform: scale(1.01);
  overflow: hidden;
}
.cs-item--inner .cs-item--title{
	font-size: 90px;
}

.cs-item--inner .cs-item--subtitle{
	color: #333333;
	font-size: 20px;
	font-weight: 600;
	display: inline-block;
	text-transform: capitalize;
	opacity: 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
}
.cs-photography--slider .swiper-slide-active .cs-heading .cs-item--title{
	opacity: 1;
}
.cs-photography--slider .swiper-slide-active .cs-heading .cs-item--subtitle{
	opacity: 1;
}
.cs-photography--slider .cs-bottom--pane{
	height: 90px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
  overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cs-photography--slider .cs-swiper--dots {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
  overflow: hidden;
	z-index: 1;
}
.cs-photography--slider .cs-swiper--dots:before,
.cs-photography--slider .cs-swiper--dots:after{
	content: '';
	position: absolute;
	top: 50%;
  overflow: hidden;
	width: 125px;
	height: 1px;
  overflow: hidden;
	background-color: #ffffff4d;
}
.cs-photography--slider .cs-swiper--dots:before{
	right: calc(100% + 24px);
  overflow: hidden;
}
.cs-photography--slider .cs-swiper--dots:after{
	left: calc(100% + 24px);
}
.cs-swiper--dots .swiper-pagination{
	display: flex;
	gap: 6px;
	position: relative;
	transform: none;
	top: 0;
	bottom: auto;
	margin-top: 16px;
}
.cs-swiper--dots .swiper-pagination .swiper-pagination-bullet{
	width: 24px;
	height: 24px;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 100%;
  overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0px 0px;
	cursor: pointer;
	transition: all 0.5s ease-in-out;
	position: relative;
	opacity: 1;
	font-size: 14px;
	font-weight: 600;
}
.cs-swiper--dots .swiper-pagination .swiper-pagination-bullet-active{
	transform: scale(1.1);
	border-color: #3c424f;
	background-color: transparent;
}
.cs-swiper--dots .swiper-pagination .swiper-pagination-bullet:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 6px;
	background-color: #3c424f;
	border-radius: 100%;
	transition: all 0.5s ease-in-out;
}
.cs-swiper--navigation{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	left: 50%;
	right: 50px;
	bottom: auto;
	width: 43%;
	transform: translateX(-50%);
}
.cs-swiper--navigation .cs-swiper--arrow{
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	width: 60px;
	height: 60px;
	color: #3c424f;
	background-color: transparent;
	border: 0px dashed #3c3c3c;
	border-radius: 100%;
	margin-top: 0px;
}
.cs-swiper--navigation .cs-swiper--arrow:after{
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase !important;
	font-family: "DM Sans", sans-serif;
}
.cs-swiper--navigation .swiper-button-prev:after{
	content: "Prev";
}
.cs-swiper--navigation .swiper-button-next:after{
	content: "Next";
}
/* ======================= Responsive Ipad Pro ============================== */
@media screen and (max-width: 1366px) {
	.cs-item--inner .cs-item--title{
		font-size: 54px;
		line-height: 1.2em;
	}
	.cs-item--inner .cs-item--title:before, .cs-item--inner .cs-item--title:after{
		display: none;
	}
}
/* ======================= Responsive Ipad ============================== */
@media screen and (max-width: 991px) {
	.cs-item--inner .cs-item--title{
		font-size: 40px;
	}
	.cs-swiper--navigation{
		display: none;
	}
}
/* ======================= Responsive Ipad ============================== */
@media screen and (max-width: 460px) {
	.cs-slider--item .cs-slider--inner{
		left: 50px;
		right: 50px;
	}
	.cs-photography--slider .cs-swiper--dots:before, .cs-photography--slider .cs-swiper--dots:after{
		width: 50px;
	}
}

/* ====================== Buy Me A Coffee =============================== */




/* What we do */

.what_we_do{
  width: 100%;
  padding: 6vw 4vw;
  background-color: #FCFAF8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.what_we_do_info{
  width: 50%;
  padding: 6vw 0vw; 
}
.what_we_do_info span{
  font-family: mazius;
  color: #14CF93;
}

.what_we_do_info h4{
  font-family: mons;
  font-size: 4vw;
  color: #333333;
}
.what_we_do_info p{
  padding-top: 2vw;
  font-size: 2vw;
  color: #333333;
}
.what_we_do_imgs{
  width: 50%;
  display: flex;
  justify-content: space-between;
}

.what-we-do_imgs_33{
  width: 33%;
}
.what-we-do_imgs_33_33w {
  text-align: center;
}
.what-we-do_imgs_33_33w img{
  width: 50%;
  padding-bottom: 4vw;
}

.what-we-do_imgs_33_33w h3{
  font-family: gilroy;
  letter-spacing: 1px;
  font-size: 1.2vw;
  text-transform: uppercase;
}

.what_we_do_btn{
  margin-top: 40px;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  padding: 0.6em 1.6em;
  border: 2px solid #333333;
  border-radius: 2px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
  color: #333333;
  text-decoration: none;
  transition: 0.3s ease all;
  z-index: 1;
}

.what_we_do_btn:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #333333;
  z-index: -1;
}

.what_we_do_btn:hover, .what_we_do_btn:focus {
  color: white;
}

.what_we_do_btn:hover:before, .what_we_do_btn:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

.what_we_do_btn:active {
  transform: scale(0.9);
}
.who_we_worked {
  padding: 4vw 8vw;
  background-color: #FCFAF8;
}
.who_we_worked_heading{
  padding: 4vw 3vw;
  background-color: #333333;
}
.who_we_worked_heading h4{
  text-align: center;
  font-size: 3.2vw;
  color: #FFF;
}
.who_we_worked_heading p{
  font-size: 1.3vw;
  margin-top: 1vw;
  color: #fff;
  text-align: center;
}



.image-grid {
  padding: 4vw 4vw;
  background-color: #FFFFFF;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Always 4 columns */
  gap: 40px;
  justify-items: center;   /* Horizontally center */
  align-items: center;   
}

.image-grid img {
  width: 100%;
  height: auto;
  filter: grayscale(100%);   
  display: block;
  border-radius: 8px;
  mix-blend-mode: multiply;   
  background-color: transparent;
}
.image-grid img:hover {
  filter: grayscale(0%);          /* Hover: color */
}

/* Tablet & mobile: 2 columns */
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Extra small mobile: 1 column */
@media (max-width: 480px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.start_a_project_info span{
  font-family: mazius;
  color: #14CF93;
}

/* Start a project */
.start_a_project {
  width: 100%;
  background-color: #FCFAF8;
  display: flex;
  justify-content: space-between;
  padding: 6vw 4vw;
}
.start_a_project_info{
  width: 50%;
  padding: 2vw 0vw;
}
.start_a_project_info h2{
  font-size: 4vw;
  font-family: mons;
  color: #333333;
}
.start_a_project_info p {
  padding-top: 2vw;
  font-size: 1.8vw;
  color: #333333;
}
.start_a_project_ancors {
  width: 50%;
  justify-content: center;
  padding: 0vw 1vw;
  display: flex;
}
.start_a_project_ancors_div{
  width: 33%;
  text-align: center;
}

.start_a_project_btn_overlay{
  width: 100%;
  display: flex;
  justify-content: center;
}

.start_a_project_ancors_div img{
  width: 50%;
}

/* From Uiverse.io by JaydipPrajapati1910 */ 
.start_a_project_btn {
  margin-top: 20px;
  font-size: 0.8vw;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  padding: 0.7em 1.6em;
  border: 2px solid black;
  border-radius: 2px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
  color: black;
  text-decoration: none;
  transition: 0.3s ease all;
  z-index: 1;
}

.start_a_project_btn:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: black;
  z-index: -1;
}

.start_a_project_btn:hover, .start_a_project_btn:focus {
  color: white;
}

.start_a_project_btn:hover:before, .start_a_project_btn:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

.start_a_project_btn:active {
  transform: scale(0.9);
}

/* Footer */
.footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  background-color: #222;
  color: white;
  padding: 8vw 4vw;
  font-family: gilroy;
}
footer h2{
  font-size: 1em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.footer h3 {
  font-size: 1em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.footer_icons_p_parent {
  padding: 1vw 0vw;
}

footer .footer_icons_p a{
  text-decoration: none;
  color: #a0a0a0;
  font-family: gilroy-lt;
  font-size: 1em;
  padding-left: 2vw;
  
}
footer i{
  font-size: 1em;
  color: #a0a0a0;
}
.footer_icons_p {
  padding: 2px 0px;
}
.footer_app {
  padding: 2vw 0vw;
  font-family: gilroy-lt;
  color: #a0a0a0;
}
.footer_social{
  padding: 2vw 0vw;
  display: flex;
  gap: 20px;
}
footer .footer-col h2{
  font-size: 1em;
  color: #fff;
  font-family: gilroy-lt;
}

/* Get a Quote btn */
.get_quote_btn {
  margin-top: 20px;
  font-size: 1vw;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  padding: 0.9em 1.8em;
  border: 1px solid #a0a0a0;
  border-radius: 2px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
  color: #14CF93;
  text-decoration: none;
  transition: 0.3s ease all;
  z-index: 1;
}

.get_quote_btn:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: black;
  z-index: -1;
}

.get_quote_btn:hover, .get_quote_btn:focus {
  color: white;
}

.get_quote_btn:hover:before, .get_quote_btn:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

.get_quote_btn:active {
  transform: scale(0.9);
}

/* btn ended */

footer .footer_featured p,a{
  text-decoration: none;
  color: #a0a0a0;
  font-family: gilroy-lt;
  font-size: 1em;
}

.footer_services_2nd{
  padding: 4vw 0vw;
}

.footer ul li a:hover {
  text-decoration: underline;
}

.dubai_services {
  padding: 2vw 4vw;
  background-color: #FCFAF8;
}
.dubai_services h2{
  font-family: mons;
  font-size: 4vw;
  text-align: center;
  padding: 2vw 0vw;
  color: #3c3c3c;
}
.dubai_services h2 span{
  font-family: mazius;
  color: #14CF93;
}
.dubai_services p{
  font-size: 1.4vw;
  text-align: justify;
}

 








/* ------------------ */
/* |  Media Querys*   |/ 
/* ------------------ */
/* Small Phone*/ 
@media only screen and (min-width:321px) {
    #topheading{
      width: 100%;
      padding: 0rem 4rem;
    }
    #topheading h2{
        font-size: 0.7rem;
        padding: 0vw 2vw;
    }
    header #nav{
        height: 70px;
        background-color: #FFFFFF;
    }

    #home .row #row-none-img{
        display: none;
    }
      header{
        background-color: #FFFFFF;   
      }
      #nav a {
        color: #3c3c3c;
      }
      #nav a .line {
        background-color: #3c3c3c;
      }


      .container{
        width: 100%;
        padding: 26vw 8vw 8vw 8vw;
        }
      .heading {
        text-align: center;
        font-size: 9vw;
        font-weight: 800;
        font-family: mons;
        line-height: 10vw;
        letter-spacing: .05em;
        color: #333;
        text-transform: uppercase;
    
      }
      .heading_stroke {
        color: transparent;
        background-color: transparent;
        -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
      }
      .heading_mazius{
        font-family: mons;
        color: #14CF93;
      }
      .intro_section{
        display: block;
        gap: 30px;
        justify-content: space-between;
      }
      .intro_section_info{
        width: 100%;
      }
      .intro_section_para{
        display: inline-block;
        width: 100%;
        font-size: 1.3em;
        text-align: center;
        font-family: gilroy;
        margin-top: 30px;
      }
      .intro_mazius{
        font-family: mazius;
        color: #14CF93;
      }
      .intro_section_btn_overlay{
        width: 100%;
        margin-top: 20px;
        justify-content: center;
        display: flex;
      }
      .intro_section_left{
        display: flex;
        justify-content: start;
      }
    
      .intro_section_right{
        margin-top: 40px;

      }
       
      .intro_section_list{
        width: 100%;
        margin-top: 40px;
        padding-left: 20px;
      }
      .intro_section_list li{
        font-size: 1em;
        list-style: "/ ";
        line-height: 6vw;
      }

        /* Intro Btn */
  .intro_section_btn {
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    padding: 0.7em 2em;
    border: 2px solid #333333;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
    color: #333333;
    text-decoration: none;
    transition: 0.3s ease all;
    z-index: 1;
  }

  .intro_section_btn:before {
    transition: 0.5s all ease;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0;
    opacity: 0;
    content: '';
    background-color: #333333;
    z-index: -1;
  }

  .intro_section_btn:hover, .intro_section_btn:focus {
    color: white;
  }

  .intro_section_btn:hover:before, .intro_section_btn:focus:before {
    transition: 0.5s all ease;
    left: 0;
    right: 0;
    opacity: 1;
  }

  .intro_section_btn:active {
    transform: scale(0.9);
  }

  .cs-photography--slider .cs-slider--item {
    position: relative;
    overflow: hidden;
    height: auto;
    width: 100%;
    display: block;
    align-items: stretch;
    justify-content: space-between;
  }
  .cs-slider--item .cs-slider--image{
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .slider_height_fix {
    width: 100%;
    min-height: none;
  }

  .cs-slider--image img{
    width: 50%;
    overflow: hidden;
    filter: grayscale(100%);
    /* transition: transform 0.6s ease; */
  }
  
  .cs-slider--item .cs-slider--inner {
    display: flex;
    width: 100%;
    padding: 10vw 4vw 18vw 4vw;
    align-items: center;
    justify-content: start;
    overflow: hidden;
    background-color: transparent;
  }
  .cs-item--inner .cs-item--title{
    font-size: 6vw;
    color: #fff;
  }
  .portfolio__type {
    font-weight: 300;
    font-family: gilroy;
    font-size: 3vw;
    text-align: start;
    color: #3c424f;
  }
  .portfolio__name {
    padding: 1vw 0vw 0vw 4vw;
    text-align: center;
    color: #3c424f;
    font-size: 5vw;
    font-weight: 300;
    line-height: 5vw;
  }
  .portfolio__info {
    font-size: 3vw;
    padding-top: 3vw;
    color: #3c424f;
  }

  .portfolio__wrap {
    padding-top: 2vw;
    color: #3c424f;
  }
  .portfolio__wrap .cli{
    font-family: mazius;
    letter-spacing: 1px;
    color: #14CF93;
  }
  .portfolio__table {
    padding-top: 2vw;
    color: #3c424f;
  }
  .portfolio__table-item .mazius{
    color: #3c424f;
  }
  .portfolio__table_btn {
    margin-top: 2vw;
    margin-bottom: 4vw;
    display: flex;
    width: 100%;
    
    justify-content: center;
    
  }
  .table_btn{
    padding: 0.8em 2em;
    border: 2px solid #3c424f;
    color: #3c424f;
    font-size: 15px;
  }

  .cs-slider--item {
    border-radius: 3vw;
  }
  .who_we_worked_heading h4{
    text-align: center;
    font-size: 6vw;
    color: #FFF;
  }
  .who_we_worked_heading p{
    font-size: 3vw;
    margin-top: 1vw;
    color: #fff;
    text-align: center;
  }
  .who_we_worked_heading span{
    font-family: mazius;
    color: #14CF93;
  }

  .what_we_do{
    width: 100%;
    display: block;
    justify-content: space-between;
  }
  .what_we_do_info{
    width: 100%;
  }
  .what_we_do_info h4{
    text-align: center;
    font-size: 6vw;
    color: #333333;
  }
  .what_we_do_info p{
    padding-top: 2vw;
    font-size: 3vw;
    color: #333333;
  }
  .what_we_do_imgs{
    width: 100%;
    display: block;
  }
  
  .what-we-do_imgs_33{
    width: 100%;
    padding: 2vw 4vw;
  }

  .what-we-do_imgs_33_33w {
    width: 100%;
    text-align: center;
    display: flex;
    padding: 0vw 2vw;
    justify-content: space-between;
    align-items: center;
  }
  .what-we-do_imgs_33_33w img{
    width: 20%;
    padding-bottom: 4vw;
  }
  
  .what-we-do_imgs_33_33w h3{
    font-family: gilroy;
    letter-spacing: 1px;
    font-size: 2.6vw;
    text-transform: uppercase;
  }
  .start_a_project {
    width: 100%;
    display: block;
    justify-content: space-between;
    padding: 6vw 4vw;
  }
  .start_a_project_info{
    width: 100%;
    padding: 2vw 0vw;
  }
  .start_a_project_info h2{
    font-size: 6vw;
    text-align: center;
    font-family: mons;
    color: #333333;
  }
  .start_a_project_info p {
    padding-top: 2vw;
    font-size: 3vw;
    color: #333333;
  }
  .start_a_project_ancors {
    width: 100%;
    padding: 6vw 1vw;
    display: block;
  }
  .start_a_project_ancors_div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0;
    text-align: center;
    align-items: center;
  }
  .start_a_project_ancors_div_p_btn{
    padding: 0;
    width: 100%;
  }
  .start_a_project_btn {
    font-size: 3vw;
    display: inline-block;
    width: 100%;
    margin-top: 4px;
  }
  .start_a_project_ancors_div_icon{
    padding: 4vw 0vw;
    width: 50%;
    display: flex;
  }
  .start_a_project_ancors_div_icon img{
    width: 60%;
  }
  .slider-heading h4{
    color: #333333;
    font-size: 6vw;
  }
  .slider-heading span{
    font-family: mazius;
    color: #14CF93;
  }
  .start_a_project_ancors_div_p_btn p {
    font-size: 4vw;
  }
  .what-we-do_imgs_33_33w p{
    letter-spacing: 1px;

  }
    .get_quote_btn{
      font-size: 3.4vw;
    }

    .dubai_services h2{
      font-size: 6vw;
      padding: 4vw 0vw;
    }
    .dubai_services h2 span{
      font-family: mazius;
      color: #14CF93;
    }
    .dubai_services p{
      font-size: 3.8vw;
      text-align: justify;
      color: #3c3c3c;
    }
    

}


/* Phones */
@media only screen and (min-width: 480px){
  .start_a_project_ancors_div_p_btn p {
    font-size: 3vw;
  }
  .get_quote_btn{
    font-size: 2.6vw;
  }
  .dubai_services p{
    font-size: 2.4vw;
    text-align: justify;
    color: #3c3c3c;
  }
  .what_we_do_info p{
    padding-top: 2vw;
    font-size: 2.4vw;
    color: #333333;
  }

  .container{
    width: 100%;
    padding: 120px 50px 50px 50px;
    }
}


@media only screen and (min-width: 768px){
  .none{
    display: none;
  }
  header{
    background-color: #FFFFFF; 
  }
  #home .row #row-none-img{
    display: block;
  }
  #home{
    background-color: #FCFAF8;
  }
    #nav a .line {
      background-color: #3c3c3c;
    }
    #nav a {
      color: #3c3c3c;
    }
  .container{
    width: 100%;
    padding: 120px 50px 50px 50px;
    }
  .heading {
    text-align: start;
    font-size: 5vw;
    font-weight: 900;
    line-height: 45px;
    font-family: mons;
    letter-spacing: .05em;
    color: #333;
    text-transform: uppercase;

  }
  .heading_stroke {
    color: transparent;
    background-color: transparent;
    -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
  }
  .heading_mazius{
    font-family: mazius;
    color: #14CF93;
  }
  .intro_section{
    display: flex;
    gap: 30px;
    justify-content: space-between;
  }
  .intro_section_info{
    width: 50%;
  }
  .intro_section_para{
    display: inline-block;
    width: 75%;
    font-size: 1.1em;
    line-height: 28px;
    font-family: gilroy;
    margin-top: 30px;
  }
  .intro_mazius{
    font-family: mazius;
    color: #14CF93;
  }
  .intro_section_btn_overlay{
    width: 55%;
    margin-top: 30px;
  }
  .intro_section_left{
    display: flex;
    justify-content: start;
  }

  .intro_section_right{
    display: flex;
    justify-content: right;
  }
   
  .intro_section_list{
    width: 50%;
    margin-top: -50px;
  }
  .intro_section_list li{
    font-size: 1em;
    list-style: "/ ";
    line-height: 35px;
  }

  /* Intro Btn */
  .intro_section_btn {
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    padding: 0.7em 1.6em;
    border: 2px solid #333333;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
    color: #333333;
    text-decoration: none;
    transition: 0.3s ease all;
    z-index: 1;
  }

  .intro_section_btn:before {
    transition: 0.5s all ease;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0;
    opacity: 0;
    content: '';
    background-color: #333333;
    z-index: -1;
  }

  .intro_section_btn:hover, .intro_section_btn:focus {
    color: white;
  }

  .intro_section_btn:hover:before, .intro_section_btn:focus:before {
    transition: 0.5s all ease;
    left: 0;
    right: 0;
    opacity: 1;
  }

  .intro_section_btn:active {
    transform: scale(0.9);
  }

  .cs-photography--slider .cs-slider--item {
    position: relative;
    overflow: hidden;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  .cs-slider--item .cs-slider--image{
    width: 50%;
    display: block;
    overflow: hidden;
  }
  .cs-slider--image img{
    width: 100%;
    filter: grayscale(100%);
    overflow: hidden;
  }
  
  .cs-slider--item .cs-slider--inner {
    display: flex;
    width: 50%;
    padding: 10vw 4vw 18vw 4vw;
    align-items: center;
    justify-content: start;
    overflow: hidden;
    background-color: transparent;
  }
  .cs-item--inner .cs-item--title{
    font-size: 6vw;
    color: #fff;
  }

  .portfolio__type {
    font-weight: 300;
    font-family: gilroy;
    font-size: 1vw;
    text-align: start;
    color: #3c424f;
  }
  .portfolio__name {
    padding: 1vw 0vw 0vw 4vw;
    text-align: center;
    color: #3c424f;
    font-size: 1.3vw;
    font-weight: 300;
    line-height: 2vw;
  }
  .portfolio__info {
    font-size: 0.9vw;
    padding-top: 2vw;
    color: #3c424f;
  }
  .portfolio__wrap {
    padding-top: 2vw;
    color: #3c424f;
  }
  .portfolio__wrap .cli{
    font-family: mazius;
    letter-spacing: 1px;
    color: #14CF93;
  }
  .portfolio__table {
    padding-top: 2vw;
    color: #3c424f;
  }
  .portfolio__table-item .mazius{
    color: #3c424f;
  }
  .portfolio__table_btn {
    margin-top: 3vw;
  }
  .table_btn{
    border: 2px solid #3c424f;
    color: #3c3c3c;
  }


          /* What we do */

.what_we_do{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 6vw 4vw;
}
.what_we_do_info{
  width: 50%;
}
.what_we_do_info h4{
  font-size: 4vw;
  text-align: start;
  color: #333333;
}

.what_we_do_info p{
  padding-top: 2vw;
  font-size: 1.4vw;
  color: #333333;
}
.what_we_do_imgs{
  width: 50%;
  display: flex;
  justify-content: space-between;
}
.what_we_do_info span{
  font-family: mazius;
  color: #14CF93;
}

.what-we-do_imgs_33{
  width: 33%;
  padding: 0 0vw;
}
.what-we-do_imgs_33_33w {
  text-align: center;
  display: block;
}
.what-we-do_imgs_33_33w p{
  font-size: 1.4vw;
  color: #3c3c3c;
}
.what-we-do_imgs_33_33w img{
  width: 50%;
  padding-bottom: 4vw;
}


.what-we-do_imgs_33_33w h3{
  font-family: gilroy;
  letter-spacing: 1px;
  text-align: center;
  font-size: 1.5vw;
  text-transform: uppercase;
}
/* Start project */
.start_a_project {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6vw 4vw;
}
.start_a_project_info{
  width: 50%;
  padding: 2vw 2vw 0vw 0vw;
}
.start_a_project_info h2{
  font-size: 4vw;
  text-align: start;
  font-family: mons;
  color: #333333;
}
.start_a_project_info p {
  padding-top: 2vw;
  font-size: 1.4vw;
  color: #333333;
}
.start_a_project_ancors {
  width: 50%;
  padding: 2vw 1vw;
  display: block;
}
.start_a_project_ancors_div{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0;
  text-align: center;
  align-items: center;
}
.start_a_project_ancors_div_p_btn{
  padding: 0;
  width: 100%;
}
.start_a_project_ancors_div_p_btn p{
  font-size: 1.4  vw;
}
.start_a_project_btn {
  font-size: 2vw;
  display: inline-block;
  width: 100%;
  margin-top: 4px;
}
.start_a_project_ancors_div_icon{
  padding: 2vw 0vw;
  width: 50%;
  display: flex;
}
.start_a_project_ancors_div_icon img{
  width: 60%;
}

.who_we_worked_heading h4{
  text-align: center;
  font-size: 6vw;
  color: #FFF;
}
.who_we_worked_heading p{
  font-size: 2vw;
  margin-top: 1vw;
  color: #fff;
  text-align: center;
}
.get_quote_btn{
  font-size: 2.2vw;
}
.dubai_services h2{
  font-size: 4vw;
}
.dubai_services h2 span{
  font-family: mazius;
  color: #14CF93;
}
.dubai_services p{
  font-size: 2vw;
  text-align: justify;
}
.slider-heading h4{
  font-size: 4vw;
}

}

/* Desktop */
@media only screen and (min-width: 992px) {
    .none{
      display: none;
    }
    header{
      background-color: #FFFFFF; 
    }
    #home .row #row-none-img{
      display: block;
    }
    #home{
      background-color: #FCFAF8;
    }
      #nav a .line {
        background-color: #3c3c3c;
      }
      #nav a {
        color: #3c3c3c;
      }
    .container{
      width: 100%;
      padding: 60px 50px 50px 50px;
      }
    .heading {
      text-align: start;
      font-size: 4vw;
      font-weight: 900;
      line-height: 58px;
      font-family: mons;
      letter-spacing: .05em;
      color: #333;
      text-transform: uppercase;

    }
    .heading_stroke {
      color: transparent;
      background-color: transparent;
      -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: black;
    }
    .heading_mazius{
      font-family: mazius;
      color: #14CF93;
    }
    .intro_section{
      display: flex;
      gap: 30px;
      justify-content: space-between;
    }
    .intro_section_info{
      width: 50%;
    }
    .intro_section_para{
      display: inline-block;
      width: 75%;
      font-size: 1.1em;
      line-height: 28px;
      font-family: gilroy;
      margin-top: 30px;
    }
    .intro_mazius{
      font-family: mazius;
      color: #14CF93;
    }
    .intro_section_btn_overlay{
      width: 75%;
      margin-top: 30px;
    }
    .intro_section_left{
      display: flex;
      justify-content: right;
    }

    .intro_section_right{
      display: flex;
      justify-content: right;
    }
     
    .intro_section_list{
      width: 50%;
    }
    .intro_section_list li{
      font-size: 1em;
      list-style: "/ ";
      line-height: 34px;
    }

    /* Intro Btn */
    .intro_section_btn {
      font-size: 16px;
      letter-spacing: 2px;
      text-transform: uppercase;
      display: inline-block;
      text-align: center;
      font-weight: bold;
      padding: 0.7em 1.6em;
      border: 2px solid #333333;
      border-radius: 2px;
      position: relative;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
      color: #333333;
      text-decoration: none;
      transition: 0.3s ease all;
      z-index: 1;
    }

    .intro_section_btn:before {
      transition: 0.5s all ease;
      position: absolute;
      top: 0;
      left: 50%;
      right: 50%;
      bottom: 0;
      opacity: 0;
      content: '';
      background-color: #333333;
      z-index: -1;
    }

    .intro_section_btn:hover, .intro_section_btn:focus {
      color: white;
    }

    .intro_section_btn:hover:before, .intro_section_btn:focus:before {
      transition: 0.5s all ease;
      left: 0;
      right: 0;
      opacity: 1;
    }

    .intro_section_btn:active {
      transform: scale(0.9);
    }

    .cs-photography--slider .cs-slider--item {
      position: relative;
      overflow: hidden;
      height: auto;
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
    .cs-slider--item .cs-slider--image{
      overflow: hidden;
      width: 50%;
  
    }
    .cs-slider--image img{
      width: 100%;
      overflow: hidden;
      filter: grayscale(100%);
    }
    
    .cs-slider--item .cs-slider--inner {
      display: flex;
      width: 50%;
      padding: 10vw 4vw 18vw 4vw;
      align-items: center;
      justify-content: start;
      overflow: hidden;
      background-color: transparent;
    }
    .cs-item--inner .cs-item--title{
      font-size: 6vw;
      color: #fff;
    }

    .portfolio__type {
      font-weight: 300;
      font-family: gilroy;
      font-size: 1vw;
      text-align: start;
      color: #3c424f;
    }
    .portfolio__name {
      padding: 1vw 0vw 0vw 4vw;
      text-align: center;
      font-size: 1.3vw;
      font-weight: 300;
      line-height: 2vw;
    }
    .portfolio__info {
      font-size: 0.9vw;
      padding-top: 2vw;
      color: #3c424f;
    }
    .portfolio__wrap {
      padding-top: 2vw;
      color: #3c424f;
    }
    .portfolio__wrap .cli{
      font-family: mazius;
      letter-spacing: 1px;
      color: #14CF93;
    }
    .portfolio__table {
      padding-top: 2vw;
      color: #3c424f;
    }
    .portfolio__table-item .mazius{
      color: #3c424f;
    }
    .portfolio__table_btn {
      margin-top: 3vw;
    }
    .table_btn{
      border: 2px solid #3c424f;
      color: #333333;
    }
    .cs-slider--item {
      border-radius: 3vw;
    }

            /* What we do */

.what_we_do{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.what_we_do_info{
  width: 50%;
}
.what_we_do_info h4{
  font-size: 4vw;
  text-align: start;
  color: #333333;
}
.what_we_do_info p{
  padding-top: 2vw;
  font-size: 1.4vw;
  color: #333333;
}
.what_we_do_imgs{
  width: 50%;
  display: flex;
  justify-content: space-between;
}

.what-we-do_imgs_33{
  width: 33%;
  padding: 0vw 0vw;
}
.what-we-do_imgs_33_33w {
  text-align: center;
  display: block;
}
.what-we-do_imgs_33_33w p{
  font-size: 1.4vw;
}
.what-we-do_imgs_33_33w img{
  width: 50%;
  padding-bottom: 4vw;
}

.what-we-do_imgs_33_33w h3{
  font-family: gilroy;
  letter-spacing: 1px;
  text-align: center;
  font-size: 1.2vw;
  text-transform: uppercase;
}
/* Start project */
.start_a_project {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 6vw 4vw;
}
.start_a_project_info{
  width: 50%;
  padding: 2vw 2vw 0vw 0vw;
}
.start_a_project_info h2{
  font-size: 4vw;
  text-align: start;
  font-family: mons;
  color: #333333;
}
.start_a_project_info p {
  padding-top: 2vw;
  font-size: 1.4vw;
  color: #333333;
}
.start_a_project_ancors {
  width: 50%;
  padding: 2vw 1vw;
  display: flex;
  gap: 20px;
}
.start_a_project_ancors_div{
  width: 33%;
  display: block;
  justify-content: space-between;
  padding: 0;
  text-align: center;
  align-items: center;
}
.start_a_project_ancors_div_p_btn{
  padding: 0;
  width: 100%;
}
.start_a_project_ancors_div_p_btn p{
  font-size: 1.4vw;
}
.start_a_project_btn {
  font-size: 1vw;
  display: inline-block;
  width: 100%;
  margin-top: 4px;
}
.start_a_project_ancors_div_icon{
  padding: 2vw 0vw;
  width: 100%;
  display: flex;
  justify-content: center;

}
.start_a_project_ancors_div_icon img{
  width: 30%;
}
.start_a_project_btn_overlay {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* Slider Heading */
.get_quote_btn{
  font-size: 1.6vw;
}

.slider-heading h4{
  font-size: 4vw;
}

}

/* Huge */
@media only screen and (min-width: 1280px) {
    #topheading{
    width: normal;
    }
    header{
      background-color: #FFFFFF; 
    }
    #home .row #row-none-img{
      display: block;
    }
    #home{
      background-color: #FCFAF8;
    }
      #nav a .line {
        background-color: #3c3c3c;
      }
      #nav a {
        color: #3c3c3c;
      }
      #home{
        background-color: #FCFAF8; 
      }
      #main{
        background-color: #FCFAF8;
      }
      .container{
      width: 100%;
      padding: 130px 90px 90px 90px;
      }
      .heading{
        text-align: start;
        font-size: 4vw;
        font-weight: 900;
        line-height: 66px;
        font-family: mons;
        letter-spacing: .05em;
        color: #333;
        text-transform: uppercase;
      }
      .heading_stroke {
        color: transparent;
        background-color: transparent;
        -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
      }
      .heading_mazius{
        font-family: mazius;
        color: #14CF93;
      }

      .intro_section{
        display: flex;
        gap: 30px;
        justify-content: space-between;
      }
      .intro_section_info{
        width: 50%;
      }
      .intro_section_para{
        display: inline-block;
        width: 75%;
        font-size: 1.2em;
        line-height: 28px;
        text-align: start;
        font-family: gilroy;
        margin-top: 30px;
      }
      .intro_mazius{
        font-family: mazius;
        color: #14CF93;
      }
      .intro_section_btn_overlay{
        width: 75%;
        margin-top: 30px;
      }
      .intro_section_left{
        display: flex;
        justify-content: right;
      }

      .intro_section_right{
        display: flex;
        justify-content: right;
      }
       
      .intro_section_list{
        width: 50%;
      }
      .intro_section_list li{
        font-size: 1.1em;
        list-style: "/ ";
        line-height: 42px;
      }

      
      .intro_section_btn {
        font-size: 18px;
        letter-spacing: 2px;
        text-transform: uppercase;
        display: inline-block;
        text-align: center;
        font-weight: bold;
        padding: 0.7em 2em;
        border: 2px solid black;
        border-radius: 2px;
        position: relative;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
        color: black;
        text-decoration: none;
        transition: 0.3s ease all;
        z-index: 1;
      }

      .intro_section_btn:before {
        transition: 0.5s all ease;
        position: absolute;
        top: 0;
        left: 50%;
        right: 50%;
        bottom: 0;
        opacity: 0;
        content: '';
        background-color: black;
        z-index: -1;
      }

      .intro_section_btn:hover, .intro_section_btn:focus {
        color: white;
      }

      .intro_section_btn:hover:before, .intro_section_btn:focus:before {
        transition: 0.5s all ease;
        left: 0;
        right: 0;
        opacity: 1;
      }

      .intro_section_btn:active {
        transform: scale(0.9);
      }
      

      /* ----------- */
      /*   Slider    */
      /* ----------- */
      .cs-photography--slider .cs-slider--item {
        position: relative;
        overflow: hidden;
        height: auto;
        width: 100%;
        display: flex;
        justify-content: space-around;
      }
      .cs-slider--item .cs-slider--image{
        overflow: hidden;
        width: 50%;
    
      }
      .cs-slider--image img{
        width: 100%;
        overflow: hidden;
        filter: grayscale(100%);
      }
      
      .cs-slider--item .cs-slider--inner {



        display: flex;
        width: 50%;
        padding: 10vw 4vw 18vw 4vw;
        align-items: center;
        justify-content: start;
        overflow: hidden;
        background-color: transparent;
      }
      .cs-item--inner .cs-item--title{
        font-size: 6vw;
        color: #fff;
      }

      .portfolio__type {
        font-weight: 300;
        font-family: gilroy;
        font-size: 1vw;
        text-align: start;
        color: #3c424f;
      }
      .portfolio__name {
        padding: 1vw 0vw 0vw 4vw;
        text-align: center;
        color: #3c424f;
        font-size: 1.3vw;
        font-weight: 300;
        line-height: 2vw;
      }
      .portfolio__info {
        font-size: 0.9vw;
        padding-top: 2vw;
        color: #3c424f;
      }
      .portfolio__wrap {
        padding-top: 2vw;
        color: #3c424f;
      }
      .portfolio__wrap .cli{
        font-family: mazius;
        letter-spacing: 1px;
        color: #14CF93;
      }
      .portfolio__table {
        padding-top: 2vw;
        color: #3c424f;
      }
      .portfolio__table-item .mazius{
        color: #3c424f;
        
      }
      .portfolio__table_btn {
        margin-top: 3vw;
      }
      .table_btn{
        border: 2px solid #3c424f;
        color: #3c3c3c;
      }
      .cs-slider--item {
        border-radius: 3vw;
      }

        /* What we do */

.what_we_do{
  width: 100%;
  padding: 6vw 4vw;
  display: flex;
  justify-content: space-between;
}
.what_we_do_info{
  width: 50%; 
}
.what_we_do_info h4{
  font-size: 4vw;
  text-align: start;
  color: #333333;
}
.what_we_do_info p{
  padding-top: 2vw;
  font-size: 1.4vw;
  color: #333333;
}
.what_we_do_imgs{
  width: 50%;
  display: flex;
  justify-content: space-between;
}

.what-we-do_imgs_33{
  width: 33%;
  padding: 0vw 0vw;
}
.what-we-do_imgs_33_33w {
  text-align: center;
  display: block;
}
.what-we-do_imgs_33_33w img{
  width: 50%;
  padding-bottom: 4vw;
}

.what-we-do_imgs_33_33w h3{
  font-family: gilroy;
  letter-spacing: 1px;
  text-align: center;
  font-size: 1.2vw;
  text-transform: uppercase;
}
/* basic page reset */
.get_quote_btn{
  font-size: 1vw;
}

}