/*CSS STYLING RESET*/


            /* Box sizing rules */
            *,
            *::before,
            *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            }

            /* Prevent font size inflation */
            html {
            -moz-text-size-adjust: none;
            -webkit-text-size-adjust: none;
            text-size-adjust: none;
            }

            /* Remove default margin in favour of better control in authored CSS */
            body, h1, h2, h3, h4, p,
            figure, blockquote, dl, dd {
            margin-block-end: 0;
            }

            /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
            ul[role='list'],
            ol[role='list'] {
            list-style: none;
            }

            /* Set core body defaults */
            body {
            min-height: 100vh;
            line-height: 1.5;
                overflow-x: hidden;
                margin: 0;
                background-color: #f2f2f2;
            }


            /* Balance text wrapping on headings */
            h1, h2,
            h3, h4 {
            text-wrap: balance;
            }

            /* A elements that don't have a class get default styles */
            a:not([class]) {
            text-decoration-skip-ink: auto;
            color: currentColor;
            }

            /* Make images easier to work with */
            img,
            picture {
            max-width: 100%;
            display: block;
            }

            /* Inherit fonts for inputs and buttons */
            input, button,
            textarea, select {
            font-family: inherit;
            font-size: inherit;
            }

            /* Make sure textareas without a rows attribute are not tiny */
            textarea:not([rows]) {
            min-height: 10em;
            }

            /* Anything that has been anchored to should have extra scroll margin */
            :target {
            scroll-margin-block: 5ex;
            }

            a {
                text-decoration: none;
                color: inherit;
                display: inline-block;
                transition: transform 0.3s ease;
                
            }

            button {
              text-decoration: none;
              color: inherit;
            }

            body {
                overflow-x: hidden;
                cursor: none;
            }



/*CSS STYLING RESET-END*/

/*background color*/
body {
  background-color: #C6C5B9;
}

/*Font Styles*/

h1 {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: 1.2px;
  color: #2A3233;
  }

h2 {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-size: 16px;
  line-height:0.8;
  color: #2A3233;
  }


ol, ul, p {

  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  line-height: 1.2;
  color: #2A3233;
  }


h4, button {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;  
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 1;
  color: #2A3233;
  }


  .invert-color {
    color: #C6C5B9 !important;
  }

/*Font Styles-END*/

  
/* Hamburger Icon */
.hamburger-icon {
  width: 80px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  top: 45px;
  right: 40px; 
  z-index: 1000;
  transition: 0.4s;
  height: 10px;
  mix-blend-mode: exclusion;
  z-index: 1001;
}

.hamburger-icon:hover {
  opacity: 50%;
  transform: rotate(5deg); 
}

.hamburger-icon span {
  height: 10px;
  background: #C6C5B9;
  transition: 0.5s;
}

.hamburger-icon span:nth-child(1) { width: 100%; }
.hamburger-icon span:nth-child(2) { width: 100%; }

/* Transition to cross */
.hamburger-icon.open span:nth-child(1) {
  transform: rotate(0deg);
  position: absolute;
  top: 0px;
  z-index: 2;
}

.hamburger-icon.open span:nth-child(2) {
  transform: rotate(0deg);
  position: absolute;
  top: 0px;
  z-index: 1;
}

/* Hamburger Menu */
.hamburger-menu {
  height: 100vh;
  max-height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  right: -100vw;
  background: #2A3233;
  display: flex;
  flex-direction: column;
  padding: 30vh 40px 40px 40px;
  justify-content: space-between;
  z-index: 1000;
  transition: 0.8s;
}

.hamburger-menu a {
  color: #C6C5B9;
  text-decoration: none;
  margin: 15px 0;
}

.hamburger-menu.show {
  right: 0;
}



/*skeleton padding*/

.hero {
  padding-top: 30vh !important;
  padding-bottom: 10vh !important;
}

.footer {
  padding-top: 40vh !important;
  padding-bottom: 30vh !important;
}

.section-grid-wrap {

  height: fit-content;
      display: grid; 
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
      padding: 25vh 40px 0 40px;
      overflow-x: hidden;

}

.section-cell {
  
  min-height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;

}

.services-block {
  border: #C6C5B9 1px solid;
  padding: 60px;
  text-align: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-grid-wrap {  
  height: 120vh;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0px;
  overflow-x: hidden;
}


 
.image {
  height: 100%;
  width: 100%;

 background-size: cover;
 transition: 1s;

}

.image:hover {
  opacity: 80%;

}


.button__underline {
  padding: 10px 0 10px 0;
  border-bottom: 1px solid #2A3233;
}

a:hover {
  opacity: 50%;
  transform: translateX(5px);

}


/*Fixed Divs styling*/

.navbar {
    position: fixed;
    top: 0;
    width: 100vw;
    padding: 40px;
    z-index: 1000;
    background-color: #C6C5B9;
    }
    

.basebar {
position: fixed;
bottom: 0;
right:0;
width: fit-content;
padding: 0 40px 40px 40px;
z-index: 999;
}


/*fixed logo*/

.fixed-logo {
position: fixed;
top: 40px;
left: 40px;
width: fit-content;
z-index: 1001;
transition: transform 0.5s ease; /* Smooth transition */

}


.fixed-logo:hover {
  opacity: 50%;
  transform: rotate(-5deg); 
}



/*cookie styling*/

.cookie-box {
z-index: 1000;
position: fixed; 
bottom: 0px; 
right: 0px;
left: 0px;
width: 100%;
background-color: #ffffff; 
border: #282726 1px solid;
text-align: center; 

padding: 3% 3% 3% 3%; 
}

.cookie-button {
padding: 5px 5px; 
cursor: pointer;
border: none;
background: none;
opacity: 80%;
}

.cookie-button:hover {
opacity: 50%;
}

/* Cookie Consent Banner */
.cookie-consent-banner {
  border-top: 1px solid #282726;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #c6c5b944;
backdrop-filter: blur(20px);
padding: 40px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 9999;
display: none; /* Hidden by default */
}

.cookie-consent-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.cookie-consent-content p {
margin: 0;
flex: 1;
}

.cookie-consent-content button {
background: #C6C5B9;
color: #2A3233;
border: none;
padding: 5px 20px;
cursor: pointer;
margin-right: 10px;
}

.cookie-settings-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none; /* Hidden by default */
justify-content: center;
align-items: center;
z-index: 10000;
}


.cookie-settings-content {
background: rgba(201, 201, 201, 0.8);
padding: 20px;
max-width: 400px;
width: 100%;

}

.cookie-settings-content h3 {
margin: 0 0 10px 0;
}

.cookie-settings-content button {
background: #646464;
color: white;
padding: 8px 16px;
cursor: pointer;
margin-top: 10px;
}





/* General styles for the custom cursor */
#custom-cursor {
position: fixed;
width: 10px; /* Diameter of the circle */
height: 10px;
border-radius: 50%; /* Make it a circle */
pointer-events: none; /* Allow interactions with underlying elements */
transform: translate(-50%, -50%); /* Center the circle on the cursor */
z-index: 2000; /* Ensure it's above other elements */
mix-blend-mode: difference;
background-color: #fff;
transition: transform 0.2s ease, border 0.3s ease;;
}

#custom-cursor.cursor-hover {
transform: scale(5); /* Make the cursor grow when hovering over a link */
background-color: transparent;
border: 10px solid #282726; /* Keep the 1px solid black border */

}




@media (max-width: 767px) {

.disappear {
  display: none !important;
}

.almost-disappear {
  opacity: 0%;
}
      

      #custom-cursor {
        display: none;
      }


      .section-grid-wrap {

        height: fit-content;
            display: grid; 
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 25vh 40px 0 40px;
            overflow-x: hidden;
      
      }

      .showcase-grid-wrap {  
        height: 50vh;
      }

      .cookie-consent-content {
        display: flex;
        flex-direction: column;

        gap: 10px;
        width: 100%;
        }
      

  }