@font-face {
  font-family: 'Antonio Variable';
  src: url('https://assets.website-files.com/65c25ba2f8aff30e8740e2d3/65c25ba2f8aff30e8740e39e_Antonio-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik Variable';
  src: url('https://assets.website-files.com/65c25ba2f8aff30e8740e2d3/65c2aae717d77d5142fe95e0_Rubik-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}


/* Vertical Scrollbar */
::-webkit-scrollbar {
width: 2px; /* Width of the vertical scrollbar */
}

::-webkit-scrollbar-thumb {
background-color: rgb(117, 203, 249); /* Color of the vertical scrollbar thumb */
border-radius: 2px; /* Rounded corners for the vertical scrollbar thumb */
}

::-webkit-scrollbar-track {
background-color: #f1f1f1; /* Color of the vertical scrollbar track */
}

/* Horizontal Scrollbar */
::-webkit-scrollbar-horizontal {
height: 2px; /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-thumb:horizontal {
background-color: rgb(89, 135, 15); /* Color of the horizontal scrollbar thumb */
border-radius: 2px; /* Rounded corners for the horizontal scrollbar thumb */
display: none;

width: 20px; /* Width of the horizontal scrollbar thumb */
}

::-webkit-scrollbar-track:horizontal {
background-color: #9f2525; /* Color of the horizontal scrollbar track */
display:none;
 background-color: none;
 
}


/* Track */
::-moz-scrollbar {
width: 10px; /* Adjust the width as desired */
}

/* Handle */
::-moz-scrollbar-thumb {
background: #ff0000; /* Set the color for the scrollbar thumb */
border-radius: 5px; /* Adjust the border radius as desired */
}

/* Handle on hover */
::-moz-scrollbar-thumb:hover {
background: #00ff00; /* Set the color for the scrollbar thumb on hover */
}

/* Track on hover */
::-moz-scrollbar-track:hover {
background: #cccccc; /* Set the color for the scrollbar track on hover */
}


html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: sans-serif;    
 

}

body {
  margin: 0;
  font-size: 11px;    
  font-family: Rubik Variable, sans-serif;
  background-color: var(--color-14);
  scroll-behavior: smooth;
  overflow-x: hidden;
  

}



* {
box-sizing: border-box;
}



:root {
--color-14: #f4f4f4; /* Light Gray */
--color-6: #009688; /* Teal */
--alt-color-8: #e91e63; /* Pink */
--narrow-size: 1140px;
--alt-color-7: #673ab7; /* Deep Purple */
--color-1: #607d8b; /* Blue Gray */
--alt-color-5: #f44336; /* Red */
--color-7: #3f51b5; /* Indigo */
--transparent: rgba(255, 255, 255, 0);
--color-11: #9c27b0; /* Purple */
--color-10-opacity: rgba(0, 150, 136, .1); /* Opacity based on Green */
--color-2: #009688; /* Teal */
--color-30-opacity: rgba(63, 81, 181, .3); /* Opacity based on Indigo */
--white: white;
--alt-color-3: #795548; /* Brown */
--color-10: #00bcd4; /* Cyan */
--color-9: #2196f3; /* Blue */

--alt-color-6: #ff5722; /* Deep Orange */
--color-5: #c4490017; /* Amber */
--color-3: #e46944e3; /* Yellow */
--alt-color-4: #ff9800; /* Orange */
--alt-color-11: #8bc34a; /* Light Green */
--alt-color-10: #4caf50; /* Green */
--alt-color-9: #cddc39; /* Lime */
--color-12: #ffeb3b; /* Yellow */
--color-13: #8bc34a; /* Light Green */
--alt-color-1: #795548; /* Brown */
--color-4: #ff5722; /* Deep Orange */
--color-20-opacity: rgba(33, 150, 243, .2); /* Opacity based on Blue */
--alt-color-2: #607d8b; /* Blue Gray */
--color-05-opacity: rgba(33, 150, 243, .05); /* Opacity based on Blue */
--alt-color-15: #ffffff; /* White */
--color-8: #4caf50; /* Green */
--alt-color-12: #ffc107; /* Amber */
--border-radius: 3px;
--alt-color-13: #ffeb3b; /* Yellow */
--alt-color-14: #795548; /* Brown */
--color-40-opacity: rgba(233, 30, 99, .4); /* Opacity based on Pink */
--color-50-opacity: rgba(233, 30, 99, .5); /* Opacity based on Pink */
--color-60-opacity: rgba(233, 30, 99, .6); /* Opacity based on Pink */
--color-70-opacity: rgba(233, 30, 99, .7); /* Opacity based on Pink */
--color-80-opacity: rgba(233, 30, 99, .8); /* Opacity based on Pink */
--color-90-opacity: rgba(233, 30, 99, .9); /* Opacity based on Pink */
}



.nav-bar{
  z-index: 995;
width: 100%;
background-color: rgba(255, 255, 255, 0);
flex-direction: column;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-columns: 1fr;
justify-content: space-between;
align-items: stretch;
font-weight: 400;
display: flex;
position: absolute;
top: 0%;
bottom: auto;
left: 0%;
right: 0%;

}

.nav-topbar{
  z-index: 10;
width: 100%;
height: 6em;
grid-column-gap: 4em;
grid-row-gap: 4em;
background-color: var(--color-1);
color: var(--color-9);
text-align: center;
flex-wrap: nowrap;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
justify-content: space-between;
align-items: stretch;
padding-top: 0;
padding-bottom: 0;
padding-left: 12vw;
display: flex;
position: relative;
overflow: hidden;

  
}

.nav-logo-with-contact {
  grid-column-gap: 2em;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
  
}

.nav-brand {
  z-index: 10;
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  color: var(--white);
  background-color: transparent;
  flex-direction: row;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  padding: 1em 2vw;
  transition: color .2s;
  display: flex;
  text-decoration: none;
}


.logo-image-default {
  z-index: 10;
  width: 3em;
  height: 3em;
  object-fit: contain;
  object-position: 0% 50%;
  flex: none;
  position: relative;
}


img {
  max-width: 100%;
  display: inline-block;
}

.brand-name-text {
  letter-spacing: .4em;
  text-transform: uppercase;
  font-size: 1.8em;
  font-weight: 600;
  line-height: 1em;
}

.nav-contact {
  grid-column-gap: 1.25em;
  flex-direction: row;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  display: flex;
}

.nav-contact-button {
  grid-column-gap: 1em;
  opacity: .8;
  color: var(--white);
  letter-spacing: .05em;
  text-indent: .05em;    
  flex-direction: row;
  flex: none;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  padding: 1em;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1.2em;
  transition: opacity .2s;
  display: flex;
  text-decoration: none;
}
.nav-icon {
  z-index: 10;
  width: 1em;
  height: 1em;
  object-fit: contain;
  font-size: 1.6em;
  position: relative;
}

.nav-icon.is-contact-icon {
  opacity: .6;
}



.nav-topbar-right {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  justify-content: center;
  align-self: center;
  display: flex;
}

.nav-socials {
  align-self: stretch;
  display: flex;
}

.nav-socials-list {
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.nav-social-item {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav-social-link {
  min-width: 5em;
  border-right: 1px solid var(--transparent);
  border-left: 1px solid var(--transparent);
  opacity: .6;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 1em;
  transition: min-width .6s cubic-bezier(.075, .82, .165, 1), opacity .2s, border-color .2s, background-color .2s;
  display: flex;
}

.icon.is-nav-social-icon {
  flex: none;
  font-size: 1.3em;
}



.nav-main {
  z-index: 200;
  width: 100%;
  height: 7em;
  min-height: 7em;
  border-top: 1px solid var(--color-7);
  border-right: 1px solid var(--color-7);
  border-bottom: 1px solid var(--color-7);
  flex-wrap: nowrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr .5fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12vw;
  display: flex;
  position: relative;
}

.button-for-open-menu {
  z-index: 900;
  width: 12vw;
  height: 13em;
  grid-column-gap: 2em;
  border-style: solid;
  border-width: 0 1px 1px 0;
  border-color: var(--alt-color-7)var(--color-7)var(--color-7)var(--alt-color-7);
  background-color: var(--white);
  color: var(--color-7);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 2vw;
  padding-right: 2vw;
  font-weight: 600;
  transition: background-color .2s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

.menu-button-icon {
  z-index: 10;
  width: 2em;
  height: 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}


.menu-button-line {
  width: 100%;
  height: 2px;
  background-color: var(--color-7);
}

.menu-button-text {
  z-index: 10;
  font-size: 1.2em;
  line-height: 1em;
  position: relative;
}  

.nav-main-links-wrapper {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  background-color: rgba(24, 35, 76, .2);
  flex-direction: row;
  flex: 1;
  justify-content: space-between;
  align-self: stretch;
  align-items: stretch;
  display: flex;
  position: static;
}



.w-nav-menu {
  float: right;
  position: relative;
}

.nav-main-link.w--current {
  background-color: var(--color-3);
  color: var(--white);
}

a {
  color: var(--color-6);
  text-decoration: none;
}

.nav-main-link {
  z-index: 10;
  width: 100%;
  grid-column-gap: 1em;
  border-style: solid;
  border-width: 1px 1px 1px 0;
  border-color: rgba(255, 255, 255, 0) var(--color-7) rgba(255, 255, 255, 0) var(--transparent);
  color: var(--color-14);
  text-align: center;
  letter-spacing: .1em;
  text-indent: .1em;
  text-transform: uppercase;
  background-color: transparent;
  border-radius: 0;
  flex-direction: row;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  padding: .8em .5em;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1em;
  transition: width .6s cubic-bezier(.075, .82, .165, 1), background-color .2s, color .2s, transform .2s; /* Added transform to the transition */
  display: flex;
  position: relative;
  overflow: visible;
  
}

.nav-main-link:hover {
background-color: var(--color-3);
color: var(--white);/* Change text color on hover */
  transform: scale(1.05); /* Expand the button slightly on hover */
  
}

.fullscreen-menu {
z-index: 1050;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: none;
position: fixed;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
overflow: auto;  


}

.menu-layout {
z-index: 10;
width: 100%;
flex-direction: row;
flex: 1;
justify-content: space-between;
align-self: stretch;
align-items: stretch;
display: flex;
position: relative;
overflow: hidden;
}

.menu-links {
z-index: 10;
min-width: 35%;
grid-row-gap: 4vh;
background-color: var(--white);
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 10vh 5vw 10vh 4vw;
display: flex;
position: relative;
overflow: auto
}

.menu-main-link {
color: var(--color-7);
text-align: left;
text-transform: uppercase;
padding-top: 1vh;
padding-bottom: 1vh;
font-family: Antonio Variable, sans-serif;
font-size: 4em;
font-weight: 500;
line-height: 1.1em;
transition: color .2s
}

.menu-main-link:hover {
color: var(--color-4)
}

.menu-main-link.w--current {
color: var(--color-1)
}

.menu-links-wrapper {
flex-direction: column;
flex: 0.9;
justify-content: space-between;
align-items: stretch;
display: flex
}

.menu-contact {
z-index: 10;
min-width: 15%;
border-right: 1px solid var(--color-7);
border-left: 1px solid var(--color-7);
background-color: var(--color-2);
background-image: linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08));
flex-direction: column;
justify-content: space-between;
align-items: stretch;
padding: 2vw;
display: flex;
position: relative;
overflow: hidden;
}

.menu-contact-button.is-1st {
border-top-width: 1px;
}

.menu-contact-button.w--current {
background-color: var(--color-10-opacity)
}

.menu-contact-button {
z-index: 10;
width: 100%;
height: 100%;
border-style: solid;
border-width: 0 1px 1px;
  border-top-width: 0px;
border-color: var(--color-7);
color: var(--color-14);
flex-wrap: nowrap;
justify-content: center;
align-items: center;
padding: 3vh 1vw;
font-size: 1.5em;
font-weight: 700;
line-height: 1.9em;
transition: color .2s,background-color .2s,height .6s cubic-bezier(.075,.82,.165,1);
display: flex;
position: relative;
}

.menu-contact-button-text {
letter-spacing: .1em;
text-transform: uppercase;
font-size: .9em;
font-weight: 500;
}

.menu-contact-button:hover {
z-index: 11;
height: 120%;
background-color: var(--color-4);
color: var(--white);
}



.menu-projects {
z-index: 10;
min-width: 35%;
grid-row-gap: 4vh;
border-right: 1px solid var(--color-7);
background-color: var(--color-2);
flex-direction: column;
justify-content: space-between;
align-items: stretch;

padding-bottom: 10vh;
display: flex;
position: relative;
overflow: auto
}

p {
margin-bottom: 2;
font-size: 1.2em;
line-height: 1.4em;
}

.menu-projects-wrap {
width: 100%;
flex: 1;
display: flex;
}


.menu-projects-list {
width: 100%;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
display: flex;
}

.main-button-icon-block {
background-color: var(--color-6);
flex-direction: column;
flex: none;
justify-content: center;
align-self: stretch;
align-items: center;
padding: 1em;
display: flex
}

.menu-project-item {
width: 100%;
height: 100%;
transition: height .6s cubic-bezier(.075,.82,.165,1);
display: flex;
}

.menu-project-link-block {
width: 100%;
grid-column-gap: 2vw;
border-style: solid;
border-width: 1px 0;
border-color: var(--transparent);
color: var(--color-12);
justify-content: space-between;
align-items: center;
padding: 2.5vh 2vw 3vh 3vw;
transition: border-color .2s,background-color .2s;
display: flex;
position: relative;
overflow: hidden;
}

.menu-project-link-block:hover {
border-style: solid;
border-width: 1px 0;
border-color: var(--color-6);
background-color: var(--color-10-opacity);
color: var(--white);
overflow: hidden;
}


.menu-project-title {
letter-spacing: .05em;
text-transform: uppercase;
font-family: Antonio Variable,sans-serif;
font-size: 2em;
line-height: 1.1em;
overflow: hidden;
}


.menu-close {
z-index: 10;
background-color: var(--color-2);
cursor: pointer;
flex-direction: column;
flex: 1;
justify-content: center;
align-self: stretch;
align-items: center;
padding: 5em;
transition: background-color .5s;
display: flex;
position: relative;
overflow: hidden;
}

.menu-close-button {
z-index: 100;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
position: relative;
}

.menu-close:hover {
  background-color: var(--color-4);
color: var(--white);
}


.icon.is-close-icon {
font-size: 1.5em;
}

.menu-close-text {
z-index: 10;
color: var(--color-14);
letter-spacing: .6em;
text-indent: .6em;
text-transform: uppercase;
margin-top: 5em;
font-weight: 500;
position: relative;
transform: rotate(90deg);
}

.menu-project-image {
width: 35%;
flex: none;
align-self: stretch;
position: relative;
overflow: hidden;
}

.cover-image {
z-index: 1;
width: 100%;
height: 100%;
text-align: center;
object-fit: cover;
position: absolute;
}


.main{
display: block;
}

.home-hero {
z-index: 8;
width: 100%;
min-height: 80vh;
background-color: var(--color-1);
color: var(--color-12);
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 10em 8vw 4.4em;
display: flex;
position: relative;
overflow: hidden;
}

.home-hero-wrapper {
z-index: 20;
grid-column-gap: 5em;
background-color: var(--color-10-opacity);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
justify-content: flex-start;
align-items: flex-start;
padding: 4em;
display: flex;
position: relative;
}

.home-hero-slider-timeline {
z-index: 20;
width: 4em;
border: 1px solid var(--color-7);
background-color: var(--color-30-opacity);
align-self: stretch;
padding: 5px;
position: relative;
overflow: hidden;
}

.slider-timeline-block {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

.slider-image-3 {
width: 100%;
height: 100%;
}
.slider-timeline-color {
background-color: var( --color-14);
position: absolute;
top: -100%; /* Initial position above the container */
left: 0;
width: 100%;
height: 100%;
animation: slideDown 3s ease infinite; /* Adjust duration as needed */
}

@keyframes slideDown {
0% {
    top: -100%; /* Start from above the container */
}
100% {
    top: 100%; /* Move to the bottom of the container */
}
}




.home-hero-content {
z-index: 10;
grid-row-gap: 4.3em;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
position: relative;
}



.home-hero-block {
width: 100%;
grid-column-gap: 6vw;
justify-content: flex-start;
align-items: center;
display: flex;
overflow: hidden;
}

.home-hero-sev {

grid-column-gap: 6vw;
justify-content: center;
align-items: center;
display: flex;
overflow: hidden;

margin-top: 3em;
}



.button-secondary {
min-height: 6em;
grid-column-gap: 2em;
border: 1px solid var(--color-7);
background-color: var(--color-10-opacity);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: var(--color-13);
flex-flow: row;
flex: none;
justify-content: center;
align-items: center;
padding: 1.3em 1.3em 1.3em 2em;
font-size: 1em;
transition: background-color .2s, border-color .2s, color .2s;
display: flex;
overflow: hidden;
}


.button-secondary-name {
letter-spacing: .1em;
text-transform: uppercase;
font-family: Antonio Variable, sans-serif;
font-size: 1.5em;
font-weight: 500;
overflow: hidden;
}

.button-secondary-icon {
background-color: var(--color-7);
flex-direction: column;
flex: none;
justify-content: center;
align-self: stretch;
align-items: center;
padding-left: 1em;
padding-right: 1em;
display: flex;
}

.icon {
z-index: 10;
width: 1em;
height: 1em;
object-fit: contain;
flex: none;
font-size: 1.3em;
position: relative;
}

.home-hero-description {
z-index: 10;
width: 100%;
max-width: 40em;
text-align: left;
position: relative;
}

.home-hero-description-text {
letter-spacing: .05em;
text-transform: uppercase;
font-size: 1.5em;
font-weight: 400;
line-height: 1.5em;
}

.home-hero-heading{
width: 50vw;
object-fit: cover;
}

.home-hero-lines {
z-index: 1;
opacity: .3;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
}

.content-background-lines {
z-index: 1;
border: 1px solid var(--color-10);
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%
}

.content-background-line {
z-index: 1;
width: 1px;
height: 100vh;
background-color: var(--color-10);
margin: -1px;
position: absolute
}

.content-background-line.is-1st {
top: -100vh;
bottom: auto;
left: 0%;
right: auto
}

.content-background-line.is-2nd {
top: -100vh;
bottom: auto;
left: auto;
right: 0%
}

.content-background-line.is-3rd {
top: auto;
bottom: -100vh;
left: 0%;
right: auto
}

.content-background-line.is-4th {
top: auto;
bottom: -100vh;
left: auto;
right: 0%
}

.content-background-line.is-5th {
width: 100vw;
height: 1px;
top: 0%;
bottom: auto;
left: -100vw;
right: auto
}

.content-background-line.is-6th {
width: 100vw;
height: 1px;
top: auto;
bottom: 0%;
left: -100vw;
right: auto
}

.content-background-line.is-7th {
width: 100vw;
height: 1px;
top: 0%;
bottom: auto;
left: auto;
right: -100vw
}

.content-background-line.is-8th {
width: 100vw;
height: 1px;
top: auto;
bottom: 0%;
left: auto;
right: -100vw
}

.home-hero-slider {
z-index: 5;
grid-row-gap: 4vh;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
}

.slider {
z-index: 1;
width: 100%;
height: 100%;
background-color: var(--color-2);
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
}
.hero-slider-overlay-color {
z-index: 5;
background-image: linear-gradient(to bottom, var(--color-1), var(--color-4) 65%, var(--transparent));
mix-blend-mode: multiply;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
background-color: var(--color-2);
opacity: .93;
}

.slider-absolute-block {
z-index: 1;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: flex-start;
display: flex;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
overflow: hidden;
}




.content-component {
z-index: 10;
width: 100%;
position: relative;
overflow: hidden;
background: #f7eee7;
}

.container {
z-index: 20;
width: 100%;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 8em;
padding-right: 8em;
position: relative;
}

.padding.less-paddings {
padding-top: 6em;
padding-bottom: 6em;
}

.content-component-wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5em 4em;
display: flex;
position: relative;
}

.vertical-flex.with-gap-2em.is-align-center {
justify-content: center;
}

.small-uppercase-title {
z-index: 10;
letter-spacing: .2em;
text-indent: .2em;
text-transform: uppercase;
font-size: 1.3em;
font-weight: 500;
line-height: 1.3em;
position: relative;
}

.max-width-60 {
z-index: 10;
width: 100%;
max-width: 60em;
position: relative;
}

.heading.is-large-title {
font-size: 3em;
line-height: 1.3em;
}

.heading {
z-index: 10;
letter-spacing: -.025em;
margin-top: 0;
margin-bottom: 0;
font-size: 3em;
font-weight: 500;
line-height: 1.4em;
position: relative;
}

.large-paragraph {
z-index: 10;
color: var(--color-9);
letter-spacing: -.025em;
margin-top: 0;
margin-bottom: 0;
font-size: 4.5em;
font-weight: 500;
line-height: 1.2em;
position: relative;
}

.content-component-lines {
z-index: 1;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
}

.content-background-lines {
z-index: 1;
border: 1px solid var(--color-10);
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
background-color: #c4490017;
}

.image-container {
display: flex;
flex-direction: row;
position: absolute;  
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease-in-out;
justify-content: center;
}

.img-con-svg{
width:12em;
height: 12em;
margin: 5rem;
margin-bottom: 0px;
padding: 5px;  
}


.img-con-text {
text-align: center; /* Centers the text horizontally */
display:inline-block; /* Change display to table */
width: 100%; /* Ensure the text spans the entire width of the parent container */
text-transform:capitalize;
font-size: medium;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.img-con-text a {
display: table-cell; /* Make the text act like a table cell */
vertical-align: middle; /* Vertically center the text */
margin-left: 1px;
}



.content-component:hover .image-container {
opacity: 1;
}

.text-container {
position: relative;
z-index: 1;
transition: opacity 0.3s ease-in-out;
}

.content-component:hover .text-container {
opacity: 0;
}

.large-paragraph {
z-index: 10;
color: var(--color-9);
letter-spacing: -.025em;
margin-top: 0;
margin-bottom: 0;
font-size: 4.5em;
font-weight: 500;
line-height: 1.2em;
position: relative;
}



.small-uppercase-title {
z-index: 10;
letter-spacing: .2em;
text-indent: .2em;
text-transform: uppercase;
font-size: 1.3em;
font-weight: 500;
line-height: 1.3em;
position: relative;
}


.about-img {
z-index: 1;
width: 100%;
height: 100%;
text-align: center; 
position: absolute;
max-width: 100%;
display: inline-block;
transform: scale3d(0.7, 0.7, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
object-fit:cover;
}



.about{
display: flex;
flex-direction: column;

}

.section {
z-index: 10;
width: 100%;
background-color: #f7eee7;
position: relative;
overflow: hidden;

}

.section-white-background{
background-color: white;
padding: 50px 0;

}




.padding {
z-index: 10;
width: 100%;
padding-top: 10em;
padding-bottom: 10em;
position: relative;
}

.home-about-grid {
width: 100%;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-columns: 1fr;
margin-left: auto;
margin-right: auto;
display: grid;

}


/* Your existing CSS for animation */
.tracking-in-contract-bck-bottom {
-webkit-animation: tracking-in-contract-bck-bottom 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
        animation: tracking-in-contract-bck-bottom 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* Your existing keyframes animation */
@-webkit-keyframes tracking-in-contract-bck-bottom {
0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(400px) translateY(300px);
            transform: translateZ(400px) translateY(300px);
    opacity: 0;
}
40% {
    opacity: 0.6;
}
100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
}
}
@keyframes tracking-in-contract-bck-bottom {
0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(400px) translateY(300px);
            transform: translateZ(400px) translateY(300px);
    opacity: 0;
}
40% {
    opacity: 0.6;
}
100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
}
}


.home-about-grid-block {
grid-row-gap: 1em;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
padding-left: 2em;
padding-right: 2em;  
display: flex;
opacity: 0;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;  
}




.icon.is-home-about-icon {
margin-bottom: 0.5em;
font-size: 6em;
}



.home-about-title-text {
color: var(--color-4);
text-transform: uppercase;
font-family: Antonio Variable,sans-serif;
font-size: 4em;
font-weight: 100;
line-height: 1em;
margin-top: 0;
margin-bottom: 0;
}


.home-about-title-text.is-2nd {
color: var(--color-7);
}

.home-about-title-text.is-3rd {
color: var(--color-9);
}


.home-about-grid-block.in-middle {
border-right: 1px solid var(--color-10);
border-left: 1px solid var(--color-10);
}

.container.is-narrow {
max-width: var(--narrow-size);
margin: 0 auto;
}

.vertical-flex.with-gap-6em {
grid-row-gap: 6em;
}

.vertical-flex.is-align-center {
text-align: center;
align-items: center;
}

.vertical-flex {
z-index: 10;
width: 100%;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
position: relative;
}



/* Style for the slides container */
.slides-container {
display: flex; /* Display slides in a row */   
scroll-snap-type: x mandatory; /* Snap to each slide */
-webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
position: relative; /* Position relative for absolute navigation buttons */

  -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s alternate-reverse both;
          animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s alternate-reverse both;

}

/* Style for each slide */
.slide {
flex: 0 0 auto; /* Make slides not shrink, grow, or shrink-to-fit */
width: 100%; /* Ensure slides take full width */
scroll-snap-align: start; /* Snap each slide to the start */
padding: 20px; /* Add padding around each slide */
box-sizing: border-box; /* Include padding in the width */
max-width: 80em;
margin-left: auto;
margin-right: auto; 
-webkit-animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 
width: 70vw;
height: 50vh; 

}




/* Style for slide title */
.slide-title {
color: var(--color-4);
text-transform: uppercase;
font-family: Antonio Variable,sans-serif;
font-size: 4em;
font-weight: 100;
line-height: 1em;
margin-top: 0;
margin-bottom: 10px; /* Add margin to bottom */
text-align: center;
letter-spacing: -.025em;  
position: relative; 

}

@-webkit-keyframes scale-in-hor-center {
0% {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  opacity: 1;
}
100% {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  opacity: 1;
}
}
@keyframes scale-in-hor-center {
0% {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  opacity: 1;
}
100% {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  opacity: 1;
}
}





/* Style for slide text */
.slide-text {
font-size: 16px; /* Set font size */
line-height: 1.5; /* Set line height */
color: var(--color-6) ; /* Set text color */
margin-bottom: 0;
text-align: center;
font-size: 2em;
font-weight: 400;
line-height: 1.7em;
opacity: .8; 
text-transform: capitalize;
}

/* Styles for slide navigation buttons */
.slide-button {
z-index: 9;
position: absolute; /* Position buttons absolutely within the container */
top: 50%; /* Position buttons at the vertical center */
transform: translateY(-50%); /* Adjust vertical position */  
border: none; /* Remove button border */
padding: 10px 20px; /* Add padding to buttons */

}

/* Style for previous button */
.prev-slide-button {
left: 0px;  
width: 30px;
height: 60px;
border-right: solid 30px var(--color-4);
border-bottom: solid 30px transparent;
border-top: solid 30px transparent;


}

/* Style for next button */
.next-slide-button {
right: 0px;  
width: 30px;
height: 60px;
border-left: solid 30px var(--color-4);
border-bottom: solid 30px transparent;
border-top: solid 30px transparent;
}

/* Hover state for slide buttons */
.slide-button:hover {
background-color: rgba(0, 0, 0, 0.7);
}


.padding.top-0em {
padding-top: 0;
}


.small-uppercase-title {
z-index: 10;
letter-spacing: .2em;
text-indent: 0.2em;
text-transform: uppercase;
font-size: 2em;
font-weight: 500;
line-height: 1.3em;
position: relative;
margin-top: 2em;
color: var(--color-6);
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}



.section.with-blue-dark-background {
background-color: var(--color-1);
color: var(--color-14);
}


.heading.is-large-title {
font-size: 4.5em;
line-height: 1.2em;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
color: var(--alt-color-1);
}


.button {
line-height: 1;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .75rem;
background-color: var(--clr);
color: #fff;
border-radius: 10rem;
font-weight: 600;
padding: .75rem 1.5rem;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background-color .3s;
}

.button__icon-wrapper {
flex-shrink: 0;
width: 25px;
height: 25px;
position: relative;
color: var(--clr);
background-color: #fff;
border-radius: 50%;
display: grid;
place-items: center;
overflow: hidden;
}

.button:hover {
background-color: #000;
}

.button:hover .button__icon-wrapper {
color: #000;
}

.button__icon-svg--copy {
position: absolute;
transform: translate(-150%, 150%);
}

.button:hover .button__icon-svg:first-child {
transition: transform .3s ease-in-out;
transform: translate(150%, -150%);
}

.button:hover .button__icon-svg--copy {
transition: transform .3s ease-in-out .1s;
transform: translate(0);
}



.services {
width: 100%;  
margin-left: auto;
margin-right: auto;
display: flex;
position: static;
background: var(--color-5);
}

.services-container {
display: flex;
width: 100%;
}

.service-images-container {
display: flex;
flex-direction: row;
margin: 10em;
}


.service-images { 
z-index: 10;
width: 40vw;  
align-self: stretch;
align-items: stretch;
display: flex;
position: relative;
overflow: hidden;  
margin-right: 10em;

}




/* Add styles to make images stack vertically */
.service-images img {
/* Set margin-bottom to create space between images */
margin-bottom: 1em; /* Adjust this value as needed */
display: none;
animation: fadeIn 0.7s ease forwards;
object-fit: cover;

}


/* Define the fadeIn animation */
@keyframes fadeIn {
from {
    opacity: 0; /* Start opacity */
    transform: translateY(20px); /* Start position */
}
to {
    opacity: 1; /* End opacity */
    transform: translateY(0); /* End position */
}
}

.services-gallery{
position: absolute;
width: 300px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 20s linear infinite;
margin: 10;
display: grid;  
margin-top: 30em;
margin-left: 30em;
}

@keyframes rotate{
from{
  transform:perspective(1200px) rotateY(0deg);
}

to{
  transform:perspective(1200px) rotateY(360deg);
}
}

.services-gallery span{
position:absolute;
width:100%;
height:100%;
transform-origin:center;
transform-style:preserve-3d;
transform:rotateY(calc(var(--i) * 45deg)) translateZ(380px);
}

.services-gallery span img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
}

.service-titles-container{
margin-top: 2em;
}


.heading.is-service-title.is-number-text {
color: var(--color-10);
}


.heading.is-service-title {
font-family: Antonio Variable, sans-serif;
font-size: 3.2em;
font-weight: 400;
line-height: 2.5em;
color: var(--color-10);
}

.service-title-with-number {
z-index: 10; 
grid-row-gap: 6vw;
justify-content: left;
align-items: center;
display: flex;
position: relative;

}

.service-title-with-number::before {
content: '';
position: absolute;
height: 100%;
width: 0%;
top: 0;
left: -40px;
transform: skewX(45deg);
background-color: var(--alt-color-7);
z-index: -1;
transition: all 3s;
}

.service-title-with-number:hover::before {
width: 150%;
}




/* Initially hide the text overlay */
.text-overlay {
display: none;
color: var(--color-7);
margin-bottom: 0; 
font-size: 1.2em; 
opacity: .8;
text-transform: capitalize;

padding-top: 3em;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 2px 6px rgba(0, 0, 0, 0.4);
background-image: linear-gradient(-225deg, #FDFDFDE3 0%, #d9804dd7 100%);
}


/* Add animation for the text overlay appearance */
/* .text-overlay.active {
display: block;
animation: fadeIn 0.5s ease forwards;
} */

/* Define fadeIn animation */
@keyframes fadeIn {
from {
    opacity: 0; /* Start opacity */
}
to {
    opacity: 1; /* End opacity */
}
}


.projects {
width: 100%;
max-width: 120em;
margin-left: auto;
margin-right: auto;
}

.projects-list {
grid-column-gap: 4em;
grid-row-gap: 4em;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}

.project-item {
z-index: 10;
grid-row-gap: 2.75em;
border: 1px solid var(--color-10);
text-align: left;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 4em;
transition: background-color .2s;
display: flex;
position: relative;
}

.project-featured-label {
z-index: 10;
border: 1px solid var(--color-7);
text-transform: uppercase;
background-color: var(--alt-color-9);
padding: 0.5em;
font-weight: 600;
position: absolute;
top: 1em;
right: 1em;
}

.project-content-wrapper {
z-index: 10;
width: 100%;
max-width: 40em;
grid-row-gap: 1em;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
position: relative;
}

.project-title-link-block {
color: var(--color-6);
transition: color .2s;
}

.w-inline-block {
max-width: 100%;

}



.heading.is-project-2-title {
margin-bottom: 0.5em;
font-size: 2.5em;
line-height: 1.2em;
}

.project-detail-wrapper {
grid-column-gap: 1.5em;
justify-content: flex-start;
align-items: center;
display: flex;
}

.project-detail-block {
min-width: 10em;
color: var(--color-9);
}

.paragraph.is-medium {
font-size: 1.5em;
}


.project-description{
text-align: justify;
color: var(--color-4);

}

.project-description:hover {
  color: rgb(13, 62, 117);
  
  }


.project-item:hover{
background-color: var(--color-10-opacity);

}


.section-clients {
background-color: var(--white);
}

.logo-carousel {
z-index: 10;
width: 100%;
flex-direction: row;
justify-content: flex-end; 
display: flex;
position: relative;
margin-bottom: 20px;
}

.logo-carousel-block {
width: 100%;
grid-column-gap: 2%;
flex-direction: row;
flex: none;
justify-content: space-around;
align-items: center;
display: flex
}



/* Animation for scrolling */
.logo-carousel-block {
animation: scrollRightToLeft 20s linear infinite; /* Adjust duration and timing function as needed */
}

@keyframes scrollRightToLeft {
0% {
  transform: translateX(100%);
}
100% {
  transform: translateX(-100%);
}
}

.ourclients{
z-index: 10;
letter-spacing: .2em;
text-indent: 0.2em;
text-transform: uppercase;
font-size: 2em;
font-weight: 500;
line-height: 1.3em;
position: relative;
margin-bottom: 2em;
color: var(--color-6);
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
text-align: center;

}


.card-row {
display: flex;
gap: 20px; /* Add some space between cards */
}


.overteam-images { 
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
display: flex;
flex-direction: column; /* Display card rows in a column */
justify-content: center;
align-items: center;
gap: 20px; /* Add some space between card rows */
background-image: linear-gradient(-225deg, #FFE29FC4 0%, #FFA99F8C 48%, #FF719A17 100%);
padding-bottom: 4em;
padding-top: 4em;
}

.card h2 {
margin: 10px 0 0 0;
padding: 0;

}

.card h3 {
margin: 0;
padding: 0;
color: #686767;
}
.card {
width: 300px;
height: 350px;
perspective: 1000px;
cursor: pointer;
}
.card img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
}
.card-container {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.55s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 10px;

}


.card:hover .card-container {
transform: rotateY(180deg);
} 

.card-face {
width: 100%;
height: 100%; 
position: absolute;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 2px 6px rgba(0, 0, 0, 0.4);
background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
}


.container-about {
display: flex; /* Use flexbox layout */
justify-content: center; /* Center content horizontally */
align-items: center; /* Center content vertically */
flex-direction: column; /* Arrange content vertically */
gap: 10px; /* Gap between child elements */
margin: 20px 0 0 0; /* Margin: top 20px, no right margin, no bottom margin, no left margin */
padding: 20px; /* Padding around content */

}

.front-face { 
    transform: rotateY(0deg);
   
 }

 .back-face {
    display: flex;
    transform: rotateY(180deg);
    
    background-image: linear-gradient(-225deg, #FFFEFF 0%,var(--color-20-opacity) 100%); /* Background image */
 } 

 .card-p{
  p {
    
    font-size: 1.2em;
    line-height: 1.4em;
}
 }

 .footer {
  z-index: 100;
  border-top: 1px solid var(--color-5);
  background-color: var(--color-2);
  color: var(--color-14);
  display: flex;
  position: relative;
  overflow: hidden;    
}

.footer-layout {
z-index: 20;
width: 100%;
grid-row-gap: 4vh;
flex-direction: column;
padding-top: 5em;  
display: flex;
position: relative;
padding-left: 9.5em;
}

.footer-main-section {

grid-row-gap: 4em;
flex: 1;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;

}

.footer-main-block{

margin-left: -200px;
}


.footer-contact-block{
margin-left: 100px;

}


.footer-logo-image {
z-index: 10;
width: 3em;
height: 3em;
object-fit: contain;
object-position: 0% 50%;
flex: none;
position: relative;
}

.footer-brand-name-text {
letter-spacing: .4em;
text-transform: uppercase;
font-size: 1.8em;
font-weight: 600;
line-height: 1em;
}


.footer-brand {
z-index: 10;
grid-column-gap: 1.25em;
grid-row-gap: 1.25em;
color: var(--white);
background-color: transparent;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0;
transition: color .2s;
display: flex;
padding-left: 5em;
}

.icon.is-medium {
font-size: 1.7em;
}


.footer-socials {

display: flex;
overflow: hidden;
margin-top: 3em;
}

.footer-socials-list {
width: 25vw;
grid-column-gap: 1em;
grid-row-gap: 1em;
flex-flow: row;
justify-content: space-between;
align-items: stretch;
display: flex;
overflow: hidden;
}

.footer-social-item {
flex-direction: column;
flex: 1;
justify-content: center;
align-self: stretch;
align-items: center;
display: flex;
overflow: hidden;
}

.icon.is-footer-social-icon {
flex: none;
font-size: 2em;
}

.footer-social-link {
border: 1px solid var(--color-7);
background-color: var(--color-10-opacity);
opacity: .7;
flex-direction: column;
flex: 1;
justify-content: center;
align-self: stretch;
align-items: center;
padding: 1.5em 2em;
transition: opacity .2s, border-color .2s, background-color .2s;
display: flex;
overflow: hidden;
}

.footer-office-content {
width: 100%;
grid-row-gap: 1.25em;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
margin-top: 3em;
}

.address{
margin-top: 5em;
}

.row {
display: flex;
  flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}

.container-cont{
width: 80em;

}

.col-sm-6 {
flex: 0 0 50%; /* Take up half the width of the row */
max-width: 50%; /* Take up half the width of the row */
padding: 0 10px; /* Adjust padding as needed */
}

.gmap {
border: 10px solid #f6f5f0;
border-radius: 50%;
height: 400px;
width: 400px;
box-shadow: 0px 0px 3px 3px #e7e4dc;
overflow: hidden;
position: relative;
margin: 0 auto;
}

.gmap-area .gmap iframe {
  border-radius: 50%;
  height: 380px;
  width: 380px;
}

.footer-contact-link {
border-bottom: 5px solid var(--transparent);
color: var(--color-12);
font-size: 3.5em;
font-weight: 400;
line-height: 1.3em;
transition: border-color .2s, color .2s;
font-size: 1.7em;
}


.footer-button {
z-index: 10;
width: 100%;
grid-column-gap: 1.5em;
grid-row-gap: 1em;
border: 1px solid var(--color-7);
background-color: var(--color-3);
color: var(--color-12);
flex: 1;
justify-content: flex-start;
align-items: center;
padding: 1.5em 1.5em 1.5em 2em;
transition: color .2s, border-color .2s, background-color .2s;
display: flex;
position: relative;
overflow: hidden;
}

.footer-button-content {
grid-column-gap: 2.25em;
grid-row-gap: .5em;
letter-spacing: .03em;
flex-flow: wrap;
flex: 1;
justify-content: flex-start;
align-items: center;
display: flex;
}

.footer-button-text {
max-width: 20em;
text-transform: uppercase;
font-size: 1.3em;
font-weight: 400;
line-height: 1.2em;
}



.footer-button-icon {
width: 5em;
height: 4em;
border: 1px solid var(--alt-color-8);
background-color: var(--alt-color-5);
flex-direction: column;
flex: none;
justify-content: center;
align-items: center;
margin-left: auto;
padding: .6em;
display: flex;
overflow: hidden;
}

.mail{
color: var(--color-12);
padding-left: 1em;

}



.adp{
font-size: 1.3em;
width: 18em;
}


@media screen and (max-width:1024px) and (min-width:768px) {
body {
  font-size: 10px;
}

.nav-topbar {
height: 5em;
grid-template-columns: 1fr;
padding-left: 12em;
}

.nav-logo-with-contact {
flex: 1;
}

.nav-main {
width: 100%;
height: 5em;
min-height: 5em;
padding-left: 0;
}

.brand-name-text {
letter-spacing: .3em;
font-size: 1.5em;
}

.menu-button-icon {
width: 1.6em;
height: 10px;
}
.menu-button-text {
font-size: 1em;
}

.button-for-open-menu {
width: 12em;
height: 5em;
grid-column-gap: 2vw;
grid-row-gap: 2vw;
flex: none;
transition: none;
}

.nav-main-links-wrapper {
overflow: hidden;
}

.nav-main-link {
width: auto;
flex: 1;
padding-left: 2vw;
padding-right: 2vw;
font-size: 1em;
}



.menu-layout {
flex-wrap: wrap;
overflow: auto;
}

.menu-links {
width: 100%;
min-width: auto;
grid-row-gap: 3em;
justify-content: center;
padding: 8em 8vw 5em;
overflow: hidden;
}

.menu-links-wrapper {
grid-column-gap: 4vw;
grid-row-gap: 1.5em;
flex-flow: wrap;
flex: 0 auto;
justify-content: flex-start;
align-items: flex-start;
}

.menu-main-link {
height: auto;
align-self: auto;
padding: 0 0;
font-size: 5.5vw;
}

.menu-contact {
width: 100%;
min-width: auto;
border-bottom: 1px solid var(--color-7);
border-right-color: var(--transparent);
border-left-color: var(--transparent);
flex-flow: row;
padding: 5vw 8vw;
overflow: hidden;
}

.menu-contact-button.is-1st {
overflow: hidden;
}

.menu-contact-button {
width: auto;
height: auto;
border-top-width: 1px;
border-right-width: 0;
flex: 1;
padding-top: 2.5em;
padding-bottom: 2.5em;
overflow: hidden;
}

.menu-projects {
width: 100%;
min-width: auto;
grid-row-gap: 3em;
padding: 5vw 8vw;
overflow: hidden;
}

.menu-close {
z-index: 100;
background-color: var(--color-4);
border-radius: 50%;
padding: 1.5em;
position: absolute;
top: 1%;
bottom: auto;
left: auto;
right: 2%;
overflow: hidden;
}

.home-hero {
z-index: 10;
min-height: 70svh;
padding-bottom: 10em;
position: relative;
}
.home-hero-wrapper {
grid-column-gap: 4vw;
grid-row-gap: 4vw;
}

.home-hero-heading{
font-size: 8vw;
width: 65vw;
}

.button-secondary{
font-size: .7em;
}

.home-hero-description-text{
font-size: 1.3em;
}

.home-hero-slider{
grid-row-gap: 3.5em;

}

.hero-slider-overlay-color {
background-color: var(--color-2);
opacity: .93;
}

.slider-image-3 {
width: 100%;
height: 100%;
}
.container{
padding: left 8vw;
padding-right: 8vw;
}

.small-uppercase-title {
font-size: 1.2em;
}
.heading.is-large-title {
font-size: 4em;
}

.large-paragraph {
font-size: 4em;
line-height: 1.2em;
}

.featured-projects {
min-height: auto;
}

.featured-project-link-block {
padding-top: 12em;
padding-bottom: 12em;
}

.featured-project-content {
grid-row-gap: 2.5em;
}
.heading.is-featured-project-client-name {
font-size: 1.6em;
}
.project-title-block {
grid-row-gap: 1.5em;
padding-left: 5em;
padding-right: 5em;
}

.heading.is-featured-project-title {
font-size: 4em;
}

.featured-project-icon {
font-size: 3.5em;
}

.featured-project-link-block {
padding-top: 12em;
padding-bottom: 12em;
}

.featured-project-content {
grid-row-gap: 2.5em;
}
.heading.is-featured-project-client-name {
font-size: 1.6em;
}

.project-title-block {
grid-row-gap: 1.5em;
padding-left: 5em;
padding-right: 5em;
}

.heading.is-featured-project-title {
font-size: 4em;
}

.featured-project-icon {
font-size: 3.5em;
}

.padding {
padding-top: 8em;
padding-bottom: 8em;
}

.home-about-title-text {
font-size: 2.1em;
}

.img-con-svg {
width: 7em;
height: 7em;
margin: 3rem;
margin-bottom: 0px;
padding: 5px;
}

.img-con-text {    
  font-size: small;

}

.slide-title{
font-size: 2em;
}

.slide-text{
font-size: 1.3em;
}

.slide {
width: 50vw;
height: fit-content;
}


.prev-slide-button {
left: -25px;
width: 15px;
height: 25px;
border-right: solid 20px var(--color-4);
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
}

.next-slide-button {
right: -25px;
width: 15px;
height: 25px;
border-left: solid 20px var(--color-4);
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
}

.image-container{
justify-content: center;
}

.service-titles{

font-size: 7px;
width: 150%;
}

.services-gallery {  
width: 300px;
height: 150px;  
margin-top: 22em;

}

.service-images-container {
margin: 2em;
margin-right: 40em;
}

.text-overlay { 
 font-size: 1em;
 padding-top:0;  
}

.services-gallery{
margin-top: 10em;
  margin-left: 10em;
}

.service-images {
width: 60vw;
margin-right: 7em;
margin-top: 4em;
margin-left: 4em;
}

.card {
width: 150px;
height: 200px;

}

.card img {
width: 65px;
height: 65px;
}

.card h2 {
margin: 10px 0 0 0;
padding: 0;
font-size: 1.2em;
text-align: center;
}

.card h3 {
margin: 0;
padding: 0;
color: #686767;
text-align: center;
font-size: 0.8em;
}

.card p {
font-size: 0.8em;
line-height: 1em;
text-align: justify;
}

.container-about {
margin: 0px 0 0 0;  
}


.footer-brand{
padding-left: 150px;
}

.footer-layout{
padding-top: 2em;
padding-left: 1em;
}

.container-cont {
width: 50em;
}

.gmap {
height: 200px;
width: 200px;
}

.row {
margin-right: -20px;
margin-left: 100px;
}

.footer-contact-block {
margin-left: 25px;
}

.footer-contact-link {
font-size: 1.3em;

}

.footer-socials-list {
width: 30em;
}


.nav-icon {  
width: 1em;
height: 0.8em; 
}

.footer-socials { 
margin-top: 1em;
}
.address {
margin: 1em;

}

.footer-social-link { 
padding: 1em 1em;
}

.adp {
width: 14em;
}

.address h1 {  
font-size: 1.5em;
}

.address-block{
display: flex;
}


}

@media screen and (min-width:1025px) and (max-width:1366px){
  
  
.nav-topbar {
  height: 4em;
  grid-template-columns: 1fr;
  padding-left: 12em;
}

.nav-logo-with-contact {
  flex: 1;
}

.nav-main {
  width: 100%;
  height: 4em;
  min-height: 4em;   
}

.brand-name-text {
  letter-spacing: .3em;
  font-size: 1.2em;
}

.menu-button-icon {
  width: 1.6em;
  height: 10px;
}
.menu-button-text {
  font-size: 1em;
}

.button-for-open-menu {    
  height: 8em;
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  flex: none;
  transition: none;
}

.nav-main-links-wrapper {
  overflow: hidden;
}

.nav-main-link {
  width: auto;
  flex: 1;
  padding-left: 2vw;
  padding-right: 2vw;
  font-size: 1em;
}

.home-hero {
  padding-top: 5em;
}
.home-hero-wrapper {
  grid-column-gap: 4vw;
  grid-row-gap: 4vw;
}

.home-hero-heading{
  font-size: 8vw;
  width: 65vw;
}

.button-secondary{
  font-size: .7em;
}

.home-hero-description-text{
  font-size: 1.3em;
}

.home-hero-slider{
  grid-row-gap: 3.5em;

}

.hero-slider-overlay-color {
  background-color: var(--color-2);
  opacity: .93;
}

.slider-image-3 {
  width: 100%;
  height: 100%;
}


.home-hero-slider-timeline {    
  width: 2em;
 
}

.container{
padding: left 8vw;
padding-right: 8vw;
}

.small-uppercase-title {
font-size: 1.2em;
}
.heading.is-large-title {
font-size: 4em;
}

.large-paragraph {
font-size: 4em;
line-height: 1.2em;
}

.featured-projects {
min-height: auto;
}

.featured-project-link-block {
padding-top: 12em;
padding-bottom: 12em;
}

.featured-project-content {
grid-row-gap: 2.5em;
}
.heading.is-featured-project-client-name {
font-size: 1.6em;
}
.project-title-block {
grid-row-gap: 1.5em;
padding-left: 5em;
padding-right: 5em;
}

.heading.is-featured-project-title {
font-size: 4em;
}

.featured-project-icon {
font-size: 3.5em;
}

.featured-project-link-block {
padding-top: 12em;
padding-bottom: 12em;
}

.featured-project-content {
grid-row-gap: 2.5em;
}
.heading.is-featured-project-client-name {
font-size: 1.6em;
}

.project-title-block {
grid-row-gap: 1.5em;
padding-left: 5em;
padding-right: 5em;
}

.heading.is-featured-project-title {
font-size: 4em;
}

.featured-project-icon {
font-size: 3.5em;
}

.padding {
padding-top: 8em;
padding-bottom: 8em;
}

.home-about-title-text {
font-size: 2.1em;
}

.services-gallery{
margin-top: 15em;
  margin-left: 15em;
}

.img-con-svg {
width: 8em;
height: 8em;
margin: 3rem;
margin-bottom: 0px;
padding: 5px;
}

.img-con-text {    
  font-size: 1.2em;

}

.slide-title{
font-size: 2em;
}

.slide-text{
font-size: 1.3em;
}

.slide {
width: 50vw;
height: fit-content;
}


.image-container{
justify-content: center;
}

.service-titles{

font-size: 7px;
width: 150%;
}

.service-images-container {
margin-top: 5em;

}

.text-overlay { 
 font-size: 1em;
 padding-top:0;  
}

.service-images {
width: 45vw;
margin-left: 2em;
}

.card {
width: 200px;
height: 250px;

}

.card img {
width: 100px;
height: 100px;
}

.card h2 {
margin: 10px 0 0 0;
padding: 0;
font-size: 1.3em;
text-align: center;
}

.card h3 {
 font-size: 1.1em;
 text-align: center;
}

.card p {
font-size: 0.8em;
line-height: 1.2em;
text-align: justify;
}

.container-about {
margin: 0px 0 0 0;  
}

.footer-brand{
padding-left: 150px;
}

.footer-layout{
padding-top: 2em;
padding-left: 1em;
}

.container-cont {
width: 50em;
}

.gmap {
height: 240px;
width: 240px;
}

.row {
margin-right: -60px;
margin-left: 100px;
}

.footer-contact-block {
margin-left: 60px;
}

.footer-contact-link {
  font-size: 1.8em;
  
}

.footer-socials-list {
width: 40vw;
}


.nav-icon {  
width: 1em;
height: 0.8em; 
}

.footer-socials { 
margin-top: 1em;
}
.address {
margin: 1em;
}

.address-block{
display: flex;
}



}

@media (max-width:767px) and (min-width:480px) {
body {
  font-size: 7px;
}

.menu-close-text{
  display: none;
}


.nav-topbar {
height: 5em;
grid-template-columns: 1fr;
padding-left: 12em;
}

.nav-logo-with-contact {
flex: 1;
}

.nav-main {
width: 100%;
height: 5em;
min-height: 5em;
padding-left: 0;
}

.brand-name-text {
letter-spacing: .3em;
font-size: 1.5em;
}

.menu-button-icon {
width: 1.6em;
height: 10px;
}
.menu-button-text {
font-size: 1em;
}

.button-for-open-menu {
width: 12em;
height: 5em;
grid-column-gap: 2vw;
grid-row-gap: 2vw;
flex: none;
transition: none;
}

.nav-main-links-wrapper {
overflow: hidden;
}

.nav-main-link {
width: auto;
flex: 1;
padding-left: 2vw;
padding-right: 2vw;
font-size: 1em;
}

.nav-main-link.button-is-hidden-on-phone {
display: none;
}


.menu-layout {
flex-wrap: wrap;
overflow: auto;
}

.menu-links {
width: 100%;
min-width: auto;
grid-row-gap: 3em;
justify-content: center;
padding: 8em 8vw 5em;
overflow: hidden;
}

.menu-links-wrapper {
grid-column-gap: 4vw;
grid-row-gap: 1.5em;
flex-flow: wrap;
flex: 0 auto;
justify-content: flex-start;
align-items: flex-start;
}

.menu-main-link {
height: auto;
align-self: auto;
padding: 0 0;
font-size: 5.5vw;
}

.menu-contact {
width: 100%;
min-width: auto;
border-bottom: 1px solid var(--color-7);
border-right-color: var(--transparent);
border-left-color: var(--transparent);
flex-flow: row;
padding: 5vw 8vw;
overflow: hidden;
}

.menu-contact-button.is-1st {
overflow: hidden;
}

.menu-contact-button {
width: auto;
height: auto;
border-top-width: 1px;
border-right-width: 0;
flex: 1;
padding-top: 2.5em;
padding-bottom: 2.5em;
overflow: hidden;
}

.menu-projects {
width: 100%;
min-width: auto;
grid-row-gap: 3em;
padding: 5vw 8vw;
overflow: hidden;
}

.menu-close {
z-index: 100;
background-color: var(--color-4);
border-radius: 50%;
padding: 1.5em;
position: absolute;
top: 1%;
bottom: auto;
left: auto;
right: 2%;
overflow: hidden;
}

.home-hero {
z-index: 10;
min-height: 50svh;
position: relative;
}
.home-hero-wrapper {
grid-column-gap: 4vw;
grid-row-gap: 4vw;
}

.home-hero-heading{
font-size: 8vw;
width: 65vw;
}

.button-secondary{
font-size: .7em;
}

.home-hero-description-text{
font-size: 1.3em;
}

.home-hero-content {

grid-row-gap: 0em;

}

.home-hero-slider{
grid-row-gap: 3.5em;

}

.hero-slider-overlay-color {
background-color: var(--color-2);
opacity: .93;
}

.slider-image-3 {
width: 100%;
height: 100%;
}
.container{
padding: left 8vw;
padding-right: 8vw;
}

.small-uppercase-title {
font-size: 1.2em;
}
.heading.is-large-title {
font-size: 4em;
}

.large-paragraph {
font-size: 4em;
line-height: 1.2em;
}

.featured-projects {
min-height: auto;
}

.featured-project-link-block {
padding-top: 12em;
padding-bottom: 12em;
}

.featured-project-content {
grid-row-gap: 2.5em;
}
.heading.is-featured-project-client-name {
font-size: 1.6em;
}

.project-title-block {
grid-row-gap: 1.5em;
padding-left: 5em;
padding-right: 5em;
}

.heading.is-featured-project-title {
font-size: 4em;
}

.featured-project-icon {
font-size: 3.5em;
}

.featured-project-link-block {
padding-top: 12em;
padding-bottom: 12em;
}

.featured-project-content {
grid-row-gap: 2.5em;
}
.heading.is-featured-project-client-name {
font-size: 1.6em;
}

.project-title-block {
grid-row-gap: 1.5em;
padding-left: 5em;
padding-right: 5em;
}

.heading.is-featured-project-title {
font-size: 4em;
}

.featured-project-icon {
font-size: 3.5em;
}

.padding {
padding-top: 6em;
padding-bottom: 6em;
}

.home-about-title-text {
font-size: 2.1em;
}

.img-con-svg {
width: 4em;
height: 4em;
margin: 2.4rem;
margin-bottom: 0px;
padding: 2.5px;
margin-top: 7em;
}

.img-con-text {    
  font-size: 1em;
  justify-content: center;

}

.slide-title{
font-size: 2em;
}

.slide-text{
font-size: 1em;

}

.slide{
width: 50vw;
height: 20vh;
}


.prev-slide-button {
left: -25px;
width: 15px;
height: 25px;
border-right: solid 20px var(--color-4);
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
}

.next-slide-button {
right: -25px;
width: 15px;
height: 25px;
border-left: solid 20px var(--color-4);
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
}

.image-container{
justify-content: center;
}

.service-titles{

font-size: 5.5px;
width: 150%;
}

.services-gallery {  
width: 300px;
height: 150px;  
margin-top: 22em;


}

.service-images-container {
margin: 2em;
margin-right: 40em;
}

.text-overlay { 
 font-size: 0.8em;
 padding-top:0;  
}

.services-gallery{
margin-top: 10em;
margin-left: 10em;
}

.service-images {
width: 60vw;
margin-right: 7em;

}

.ourclients{
font-size: 1.5em;
}
.logo-carousel-block img{
width: 100%;
height: 5em;
}

.overteam-images { 
flex-direction: row; 
}


.card {
width: 150px;
height: 160px; 
display: grid;

}

.card img {
width: 65px;
height: 65px;
}

.card h2 {
margin: 10px 0 0 0;
padding: 0;
font-size: 1.2em;
text-align: center;
}

.card h3 {
margin: 0;
padding: 0;
color: #686767;
text-align: center;
font-size: 0.8em;
}



.overteam-images {

display: flex;
    flex-direction: row;
    overflow-x: auto;
    justify-content: start;

}

@keyframes scrollRightToLeft {
0% {
  transform: translateX(0);
}
100% {
  transform: translateX(-100%);
}
}




.card p {
font-size: 0.8em;
line-height: 1em;
text-align: justify;
}

.container-about {
margin: 0px 0 0 0;  
}


.footer-brand{
padding-left: 150px;
font-size: 1.2em;
}

.footer-layout{
padding-top: 2em;
padding-left: 1em;
}

.container-cont {
width: 50em;
}

.gmap {
width: 200px;
height: 200px;
margin-left: 50px; 
margin-top: 2em;
margin-bottom: 5em;
display: flex;
border: 3px solid #f6f5f0;
}

.row {
margin-right: -130px;
margin-left: 60px;
}

.footer-main-block {
margin-left: -150px;
}
.footer-main-section {
display: block;
}

.footer-contact-block {
margin-left: 25px;
}

.footer-contact-link {
font-size: 2em;
padding-right: 5px;
}

.footer-socials-list {
width: 30em;
}


.nav-icon {  
width: 1em;
height: 0.8em; 
}

.footer-socials { 
margin-top: 1em;
justify-content: center;
}
.address {
margin: 1em;
margin-left: -0.5em;
}

.footer-social-link { 
padding: 1em 1em;
}

.adp {
width: 14em;
font-size: 1.8em;
}

.address h1 {  
font-size: 2em;
}

.address-block{
display: flex;
}

.footer-contact-links-wrapper{
display: flex;
}
}



@media (max-width:479px) {


.nav-topbar {
  height: 3.5em;
  padding-left: 8em;
}

.nav-main {
height: 3.5em;
min-height: 3.5em;
}
.button-for-open-menu {
width: 8em;
height: 3.5em;
grid-column-gap: 3vw;
grid-row-gap: 3vw;
}

.brand-name-text {
letter-spacing: .3em;
font-size: 1em;
}
.nav-contact{
grid-column-gap: 0.4em;
padding-right: 0.5em;
}
.nav-contact-button {
padding-left: 3vw;
padding-right: 3vw;

}
.nav-icon.is-contact-icon{

opacity: 1;
  font-size: 1.4em;
}

.nav-contact-button-text{
display: none;
}



.nav-topbar-right{
display: none;
}

.nav-main {
height: 3.5em;
min-height: 3.5em;
padding-left: 0;
width: 100%;
}

.button-for-open-menu {
width: 8em;
height: 3.5em;
grid-column-gap: 3vw;
grid-row-gap: 3vw;
}
.menu-button-icon {
width: 1.7em;
font-size: .8em;
}
.menu-button-text {
font-size: .9em;
}
.nav-main-link {
padding-top: 0.3em;
padding-bottom: 0.3em;
font-size: .8em;
}

.nav-main-link.button-is-hidden-on-phone {
display: none;
}

.menu-main-link {
width: 100%;
border-bottom: 1px solid var(--color-10);
background-image: url(https://assets-global.website-files.com/65c25ba…/65c4d28…_line-end-arrow-fill1-wght400-grad0-opsz24%20\(2\).svg);
background-position: 100%;
background-repeat: no-repeat;
background-size: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
font-size: 10vw;
}


body {
font-size: 7px;

}

.nav-topbar {
height: 5em;
grid-template-columns: 1fr;
padding-left: 12em;
}

.nav-logo-with-contact {
flex: 1;
}

.nav-main {
width: 100%;
height: 5em;
min-height: 5em;
padding-left: 0;
}

.brand-name-text {
letter-spacing: .3em;
font-size: 1.5em;
}

.menu-button-icon {
width: 1.6em;
height: 10px;
}
.menu-button-text {
font-size: 1em;
}

.button-for-open-menu {
width: 12em;
height: 5em;
grid-column-gap: 2vw;
grid-row-gap: 2vw;
flex: none;
transition: none;
}

.nav-main-links-wrapper {
overflow: hidden;
}

.nav-main-link {
width: auto;
flex: 1;
padding-left: 2vw;
padding-right: 2vw;
font-size: 1em;
}

.nav-main-link.button-is-hidden-on-phone {
display: none;
}

.home-hero-slider-timeline {
width: 2em;
margin-left: -2em;
}

.home-hero-block {
margin-top: 1em;
grid-column-gap: 2vw;

}

.menu-layout {
flex-wrap: wrap;
overflow: auto;
}

.menu-links {
width: 100%;
min-width: auto;
grid-row-gap: 3em;
justify-content: center;
padding: 8em 8vw 5em;
overflow: hidden;
}

.menu-links-wrapper {
grid-column-gap: 4vw;
grid-row-gap: 1.5em;
flex-flow: wrap;
flex: 0 auto;
justify-content: flex-start;
align-items: flex-start;
}

.menu-main-link {
height: auto;
align-self: auto;
padding: 0 0;
font-size: 5.5vw;
}

.menu-contact {
width: 100%;
min-width: auto;
border-bottom: 1px solid var(--color-7);
border-right-color: var(--transparent);
border-left-color: var(--transparent);
flex-flow: row;
padding: 5vw 8vw;
overflow: hidden;
}

.menu-contact-button.is-1st {
overflow: hidden;
}

.menu-contact-button {
width: auto;
height: auto;
border-top-width: 1px;
border-right-width: 0;
flex: 1;
padding-top: 2.5em;
padding-bottom: 2.5em;
overflow: hidden;
}

.menu-projects {
width: 100%;
min-width: auto;
grid-row-gap: 3em;
padding: 5vw 8vw;
overflow: hidden;
}

.menu-close {
z-index: 100;
background-color: var(--color-4);
border-radius: 50%;
padding: 1.5em;
position: absolute;
top: 1%;
bottom: auto;
left: auto;
right: 10%;
overflow: hidden;
}

.menu-close-text {
display: none;
}

.home-hero {
z-index: 10;
min-height: 50svh;
position: relative;
}
.home-hero-wrapper {
grid-column-gap: 4vw;
grid-row-gap: 4vw;
}

.home-hero-heading{
font-size: 8vw;
width: 69vw;
}

.button-secondary{
font-size: .7em;
}

.home-hero-description-text{
font-size: 1.3em;
}

.home-hero-content {

grid-row-gap: 0em;

}

.home-hero-slider{
grid-row-gap: 3.5em;

}

.hero-slider-overlay-color {
background-color: var(--color-2);
opacity: .93;
}

.slider-image-3 {
width: 100%;
height: 100%;
}
.container{
padding-left: 4em;
padding-right: 5vw;

}



.small-uppercase-title {
font-size: 1.2em;
}
.heading.is-large-title {
font-size: 4em;
}
.service-title-with-number::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  left: 1%;
  transform: skewX(45deg);

  z-index: -1;
  transition: all 1s;
}

.service-title-with-number:hover::before,
.service-title-with-number:hover::after {
  width: 0%; /* Remove background color on hover */
}

.service-title-with-number:hover::before {
  width: 60%;
}

.service-title-with-number::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  right: 1%;
  background-color: none; /* Set initial background color to none */
  transition: all 1s;
}



.large-paragraph {
font-size: 4em;
line-height: 1.2em;
}

.featured-projects {
min-height: auto;
}

.featured-project-link-block {
padding-top: 12em;
padding-bottom: 12em;
}

.featured-project-content {
grid-row-gap: 2.5em;
}
.heading.is-featured-project-client-name {
font-size: 1.6em;
}

.project-title-block {
grid-row-gap: 1.5em;
padding-left: 5em;
padding-right: 5em;
}

.heading.is-featured-project-title {
font-size: 4em;
}

.featured-project-icon {
font-size: 3.5em;
}

.featured-project-link-block {
padding-top: 12em;
padding-bottom: 12em;
}

.featured-project-content {
grid-row-gap: 2.5em;
}
.heading.is-featured-project-client-name {
font-size: 1.6em;
}

.project-title-block {
grid-row-gap: 1.5em;
padding-left: 5em;
padding-right: 5em;
}

.heading.is-featured-project-title {
font-size: 4em;
}

.featured-project-icon {
font-size: 3.5em;
}

.padding {
padding-top: 6em;
padding-bottom: 6em;
}

.home-about-title-text {
font-size: 2.1em;
}

.img-con-svg {
width: 4em;
height: 4em;
margin: 1rem;
margin-bottom: 0px;
padding: 1px;
margin-top: 7em;
margin-right: 2em;
}

.img-con-text {    
font-size: 0.8em;
justify-content: center;

}

.slide-title{
font-size: 2em;
}

.slide-text{
font-size: 1.2em;
animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s alternate-reverse both;
}

.slide{
width: 75vw;
height:22vh; 
}


.prev-slide-button {
display: none;
}

.next-slide-button {
display: none;
}

.home-about-grid {
grid-column-gap: 3.25em;
grid-row-gap: 3.25em;
grid-template-columns: 1fr;
}

.home-about-grid-block {
grid-row-gap: 1em;
}

.heading.is-large-title {
font-size: 3em;
}

.button {
 padding: 0.7rem 0.5rem;
padding-left: 20px; 
font-size: 1.2em;
}

.image-container{
justify-content: center;
}

.service-titles{

font-size: 5.5px;
width: 150%;
}

.services-gallery {  
  position: absolute;

  margin-bottom: 20em;
  margin-top: 13em;
  animation: rotate 30s linear infinite;
  transform-style: preserve-3d;
  height: 150px; 
  left: -20em;
  width: 109px;
}

.service-images-container {
margin: 2em;
z-index: 1000;
backdrop-filter: blur(4px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgb(201 180 101 / 13%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
filter: drop-shadow(0 30px 10px rgba(0,0,0,0.125));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}

.text-overlay { 
font-size: 0.8em;
padding-top:0;  
}



.service-images {
display: none;

}


.heading.is-service-title {  
font-size: 3em;
line-height: 2.2em;
}

.ourclients{
font-size: 1.5em;
}
.logo-carousel-block img{
width: 100%;
height: 5em;
}

.for-carousel-logos{
  max-width: 350px;
  overflow-y: hidden;
}


.overteam-images {
  display: flex; /* Use flexbox for layout */
  flex-direction: row; /* Arrange items horizontally */
  overflow-x: auto; /* Enable horizontal scrolling if needed */
 justify-content: start;
}

.card {
  width: 150px;
  height: 120px;
  margin-right: 10px; /* Add some space between cards */
  flex: 0 0 auto; /* Allow cards to grow and shrink as needed */
}

.card img {
  width: 65px;
  height: 65px;
  display: block; /* Ensure images behave as block elements */
  margin: auto; /* Center images horizontally */
}

.card h2,
.card h3 {
  margin: 5px 0; /* Adjust spacing for headings */
  font-size: 1em; /* Adjust font size as needed */
  text-align: center; /* Center text */
}

.card p {
  font-size: 0.8em;
  line-height: 1em;
  text-align: justify;
  margin: 0; /* Remove default margins */
}




.container-about {
margin: 0px 0 0 0;  
}


.footer-brand{
padding-left: 150px;
font-size: 1.2em;
}

.footer-layout{
padding-top: 2em;
padding-left: 1em;
}

.container-cont {
width: 50em;
}

.gmap {  
height: 240px;
width: 240px;  
margin-left: 50px; 
margin-top: 2em;
margin-bottom: 5em;
 display: flex;
border: 3px solid #f6f5f0;
}

.col-sm-6 {
  padding: 0 0px;
}
.row {
margin-right: -130px;  
flex-direction: column;  
align-items: center;
}

.footer-brand-name-text {
letter-spacing: 0em;

}

.footer-main-block {
margin-left: -150px;
}
.footer-main-section {
display: block;
}

.footer-contact-block {
margin-left: 25px;
}

.footer-contact-link {
font-size: 2em;
padding-right: 5px;
padding-top: 0.5em;
}

.footer-socials-list {
width: 30em;
}


.nav-icon {  
width: 1em;
height: 0.8em; 
}


.address {
margin: 1em;
margin-left: -0.5em;
}

.footer-social-link { 
padding: 1em 1em;
}

.adp {
width: 14em;
font-size: 1.8em;
}

.address h1 {  
font-size: 2em;
}

.address-block{
display: flex;
flex-direction: column;
}

.footer-contact-links-wrapper{
display: flex;
flex-direction: column;

}

}

/* gallary page */




.full {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.full .content {
  background-color: rgba(0,0,0,0.75) !important;
  height: 100%;
  width: 100%;
  display: grid;
}
.full .content img {
  left: 50%;
  transform: translate3d(0, 0, 0);
  animation: zoomin 1s ease;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
.byebye {
  opacity: 0;
}
.byebye:hover {
  transform: scale(0.2) !important;
}
.gallery {
  display: grid;
  grid-gap: 8px; /* Adjust the gap between items */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  
}
.gallery img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 16px #333;
  transition: all 1.5s ease;
 
}
.gallery img:hover {
  box-shadow: 0 0 32px #333;
 
}
.gallery .content {
  padding: 4px;
  
}
.gallery .gallery-item {
  transition: grid-row-start 300ms linear;
  transition: transform 300ms ease;
  transition: all 0.5s ease;
  cursor: pointer;
 
}
.gallery .gallery-item:hover {
  transform: scale(1.3);
  opacity: 1;
    z-index: 1;
    box-shadow: 1em 1em 1em #0004;
    filter: sepia(0%) hue-rotate(0deg);
   
}

.gallery-list{
  padding: 5em;
  background-image: linear-gradient(to bottom, var(--color-1), var(--color-4) 65%, var(--transparent));
  mix-blend-mode: multiply;
  position: absolute;  
  background-color: var(--color-2);
  opacity: .93;
}



@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  }
}
@media (max-width: 400px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  }

  .gallery .brand-name-text {
    letter-spacing: .3em;
    font-size: 1.5em;
    margin-top: 2em;
}
}
@-moz-keyframes zoomin {
  0% {
    max-width: 50%;
    transform: rotate(-30deg);
    filter: blur(4px);
  }
  30% {
    filter: blur(4px);
    transform: rotate(-80deg);
  }
  70% {
    max-width: 50%;
    transform: rotate(45deg);
  }
  100% {
    max-width: 100%;
    transform: rotate(0deg);
  }
}
@-webkit-keyframes zoomin {
  0% {
    max-width: 50%;
    transform: rotate(-30deg);
    filter: blur(4px);
  }
  30% {
    filter: blur(4px);
    transform: rotate(-80deg);
  }
  70% {
    max-width: 50%;
    transform: rotate(45deg);
  }
  100% {
    max-width: 100%;
    transform: rotate(0deg);
  }
}
@-o-keyframes zoomin {
  0% {
    max-width: 50%;
    transform: rotate(-30deg);
    filter: blur(4px);
  }
  30% {
    filter: blur(4px);
    transform: rotate(-80deg);
  }
  70% {
    max-width: 50%;
    transform: rotate(45deg);
  }
  100% {
    max-width: 100%;
    transform: rotate(0deg);
  }
}
@keyframes zoomin {
  0% {
    max-width: 50%;
    transform: rotate(-30deg);
    filter: blur(4px);
  }
  30% {
    filter: blur(4px);
    transform: rotate(-80deg);
  }
  70% {
    max-width: 50%;
    transform: rotate(45deg);
  }
  100% {
    max-width: 100%;
    transform: rotate(0deg);
  }
}



/* project-page */

@keyframes myAnim {
	0% {
		background-position: center bottom;
		background-size: 100%;
	}

	100% {
		background-position: center bottom;
		background-size: 150%;
	}
}


@media (max-width:600px)  {
    .projects-list {
        grid-column-gap: 4em;
        grid-row-gap: 4em;
        grid-template-rows: auto;
        grid-template-columns: 1fr ;
        /* grid-auto-columns: 1fr; */
        display: grid;
    }    
}




#topBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 102; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  /* background-color: #007bff; */
  color: white; /* White text color */
  cursor: pointer; /* Add a pointer cursor on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
}

#topBtn:hover {
  background-color: #0056b3; /* Darker blue on hover */
}


/* Set background color for the entire body */

/* Ensure the whole page has a consistent background color */
.loading-page {
  background: #0f2027; /* Match this to your desired background color */

}


.loading-page {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw; /* Ensure it covers the full viewport width */
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  color: #191654; 
  z-index: 1000;
}

#svg {
  height: 150px;
  width: 150px;
  stroke: url(#gradient); /* Reference the gradient defined below */
  fill-opacity: 0;
  stroke-width: 3px;
  stroke-dasharray: 4500;
  animation: draw 8s ease;
}

@keyframes draw {
  0% {
    stroke-dashoffset: 4500;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.name-container {
  height: 30px;
  overflow: hidden;
}

.logo-name {
  color: #F49D1A; 
  font-size: 20px;
  letter-spacing: 12px;
  text-transform: uppercase;
  margin-left: 20px;
  font-weight: bolder;
}