/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}




@mixin vertical-align {
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
}

@mixin transition {
   -moz-transition: 0.3s ease-in-out all;
   -o-transition: 0.3s ease-in-out all;
   -webkit-transition: 0.3s ease-in-out all;
   transition: 0.3s ease-in-out all;
}

@mixin filter($filter) {
   -webkit-filter: $filter;
   -moz-filter: $filter;
   -o-filter: $filter;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:300,900);

$sm: 480px;
$md: 768px;
$lg: 992px;

body {
   font-family: "Roboto", sans-serif;
}

.header,
.footer {
   //height: 350px;
   background: #2e2e2e;
   color: #fff;
   padding: 30px;
   text-align: center;

   a {
      color: #fff;
   }
   //box-sizing: border-box;

   @media (min-width: $md) {
      padding: 100px 30px;
   }

   h1 {
      font-size: 4em;
      font-weight: 300;
   }

   i.fa {
      font-size: 4em;
   }

   .bounce {
      -webkit-animation-name: bounce;
      animation-name: bounce;
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
   }

   .animated {
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
   }
}

.section {
   width: 100%;
   position: relative;
   //height: 300px;

   .left,
   .middle,
   .right {
      width: 100%;
      display: block;
      color: #fff;
      box-sizing: border-box;
      left: 0;
      padding: 30px;
      text-align: center;
      overflow: hidden;

      @include transition;

      .content {
         @media (min-width: $sm) {
            @include vertical-align();
         }
      }

      @media (min-width: $sm) {
         width: 50%;
         font-size: 0.9em;
         padding: 10px;
         left: 0;
         float: left;
         position: absolute;
      }

      @media (min-width: $md) {
         width: 33.33333%;
         left: 33.33%;
         padding: 10px;
      }

      @media (min-width: $lg) {
         padding: 30px;
         font-size: 1em;
      }
   }

   &.animate {
      .left {
         left: 0;

         @media (min-width: $sm) {
            left: 50%;
         }

         @media (min-width: $md) {
            left: 0;
         }
      }

      .right {
         left: 0;

         @media (min-width: $sm) {
            left: 50%;
         }

         @media (min-width: $md) {
            left: 66.66%;
         }
      }
   }

   .title {
      background: tomato;

      h2 {
         margin-top: 0;
      }

      p {
         line-height: 1.55em;
         margin-bottom: 0.75em;
      }

      .btn-primary {
         color: #fff;
         background: darken(tomato, 10%);
         padding: 10px;
         text-decoration: none;
         border-radius: 3px;
         display: inline-block;
         @include transition;

         &:hover {
            background: darken(tomato, 15%);
         }
      }
   }

   .tiles {
      padding: 0;
      background: #fff;
      clear: both;
      display: none;
      float: none;

      img {
         width: 50%;
         float: left;
         height: auto;
         opacity: 0.7;
         @include transition;
         @include filter(grayscale(100%));

         &:hover {
            opacity: 1;
            @include filter(grayscale(0%));
         }
      }

      @media (min-width: $md) {
         display: block;
      }
   }

   .middle {
      background: slategray;
      z-index: 2;
      padding: 0;

      img {
         width: 100%;
         height: auto;
         display: block;
      }
   }
}

@-webkit-keyframes bounce {
   0%,
   20%,
   50%,
   80%,
   100% {
      -webkit-transform: translateY(0);
   }
   40% {
      -webkit-transform: translateY(-20px);
   }
   60% {
      -webkit-transform: translateY(-10px);
   }
}

@keyframes bounce {
   0%,
   20%,
   50%,
   80%,
   100% {
      transform: translateY(0);
   }
   40% {
      transform: translateY(-20px);
   }
   60% {
      transform: translateY(-10px);
   }
}


main {
  width: calc(100% - 240px);
  max-width: 680px;
  margin: 100px auto;
  z-index: 20;
}

p {
  font-size: 18px;
  line-height: 28px;
}

* {
  scroll-behavior: smooth;
}

/* Menu code starts here */

#menuToggle
{
  display: block;
  /* You can also use relative/absolute here if you want to stay on the top */
  position: fixed;
  top: 50px;
  left: 50px;
  color: #764334;
  
  z-index: 20;
  
  -webkit-user-select: none;
  user-select: none;
}
 
#menuToggle a
{
  text-decoration: none;
  color: #8f0813;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  max-width: 300px;
  max-height: 100vh;
  margin: -70px 0 0 -50px;
  padding: 40px;
  padding-top: 125px;
  box-sizing:border-box;
  overflow-y: auto;
  border-radius: 70px;
  background: #f23b00;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#menu li label
{
  cursor: pointer;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}


body,
html {
  height: 100%;
  font-family: 'adorn-condensed-sans';
  scroll-behavior: smooth;
}

.hero {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  height: 130vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.logo {
  margin-top: -5px;
  --logo-base-transform: translate(var(--logo-offset-x), var(--logo-offset-y));
  transform: var(--logo-base-transform);
  cursor: auto;
  transition: transform 0.3s ease, width 0.3s ease;
  z-index: 0;
}

.hero .logo-container {
  display: flex;
  width: 80%;
  height: auto;
  margin-top: -5px;
  justify-content: center;
}

/* Wiggle */
@keyframes wiggle {
  0% {
    transform: var(--logo-base-transform) rotate(0deg);
  }

  25% {
    transform: var(--logo-base-transform) rotate(-5deg);
  }

  50% {
    transform: var(--logo-base-transform) rotate(5deg);
  }

  75% {
    transform: var(--logo-base-transform) rotate(-3deg);
  }

  100% {
    transform: var(--logo-base-transform) rotate(0deg);
  }
}

@keyframes wave-logo-wiggle {
  0% {
    transform: var(--wave-logo-base-transform, translateY(0)) rotate(0deg);
  }

  25% {
    transform: var(--wave-logo-base-transform, translateY(0)) rotate(-4deg);
  }

  50% {
    transform: var(--wave-logo-base-transform, translateY(0)) rotate(4deg);
  }

  75% {
    transform: var(--wave-logo-base-transform, translateY(0)) rotate(-2deg);
  }

  100% {
    transform: var(--wave-logo-base-transform, translateY(0)) rotate(0deg);
  }
}

@keyframes wave-text-fade-in {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo:hover {
  animation: wiggle 0.6s ease-in-out;
}

.footer .footer-logo:hover {
  animation: footer-wiggle 0.8s ease-in-out;
}

/* Background */
body {
  background: linear-gradient(to bottom,
      #f5e3df 65%,
      /* creamy white dominates top */
      #ff7c33 100%,
      /* bright orange mid tone */
      #8f0813 100%
      /* deep red at the bottom */
    );
  background-attachment: fixed;
}




/*okofk*/



/*text and bottom wave group  */

.footer {
  position: relative;
  z-index: 4;
  bottom: -40vh;
  width: 101%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #f5e3df;
  padding: clamp(2rem, 6vw, 4rem);
  overflow: hidden;
  background: url('../images/blackbottom.svg') center bottom/cover no-repeat;
}

.footer p {
  font-family: "adorn-condensed-sans", sans-serif;
  font-style: normal;
  font-size: clamp(1rem, 2.1vw, 1.375rem);
  letter-spacing: 0.08em;
  margin: 2vh 0 0;
  transform: translateY(14vh);
}

.footer-heading {
  font-family: "active-one", sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f5e3df;
  margin-bottom: 2vh;
  transform: translateY(25vh);
}
.footer-heading a {
  color: inherit;
  text-decoration: none;
}

.footer-wave {
  display: none;
}

.footer .footer-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: min(90vw, 1000px);
  padding: clamp(2rem, 6vw, 4rem);
}

.footer-logo {
  width: clamp(319px, 44.6vw, 701px);
  height: auto;
  z-index: 5;
  position: relative;
  left: 50%;
}

@keyframes footer-wiggle {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(4deg);
  }

  75% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* --- Services wave layout overrides --- */
.wave-stack[data-wave-text="services"] {
  position: relative;
  padding-top: 360vh;
  /* push services block down by roughly two extra viewport heights */
  z-index: -3;
  /* temporary: keep visible above other layers */
}

.wave-stack[data-wave-text="services"] .wave {
  position: relative;
  left: auto;
  will-change: auto;
  pointer-events: none;
}

.wave-stack[data-wave-text="services"] .wave--captioned {
  margin: 0 auto;
  min-height: unset;
}

.wave-panel--services {
  position: relative;
  width: 100%;
  height: 250vh;
  overflow: hidden;
  z-index: 50;
  background: url('../images/wavedivwhite.svg') repeat-y;
  margin-top: -72vh;
}



.wave-panel--services .wave-panel__content {
  position: absolute;
  background: rgba(245, 227, 223, 0.92);
  color: #8f0813;
  border: 1px solid rgba(118, 67, 52, 0.2);
  box-shadow: 0 18px 36px rgba(51, 21, 9, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.65rem;
  pointer-events: auto;
}

.wave-stack[data-wave-text="services"] .wave-text-box,
.wave-panel--services .wave-text-box {
  all: unset;
}

.wave-panel--services .wave-text-heading {
  margin: 0;
  font-size: clamp(2.45rem, 8vw, 3.45rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f0813;
  font-family: "active-one", sans-serif;
}

.wave-panel--services p {
  margin: 0;
  font-family: "adorn-condensed-sans", sans-serif;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  line-height: 1.6;
}

.wave-panel--services strong,
.wave-panel--services span {
  color: #c6492d;
  letter-spacing: 0.12em;
}



/*work page*/

body.work-page::after {
  content: none;
}