:root {
  --background-color:#2E2925;
  --color:#333;
  --font-family-body:"Inter", sans-serif;
  --font-family-title:"DM Serif Display", serif;
  --color-highlight:#ffa200;
  --color-highlight-hover:#b37100;
  --width-section-main:70%;
}

/* Global */
a.action {
  background-color:var(--color-highlight);
  color:Black;
  padding:1rem 2rem;
  letter-spacing:0.1rem;
  font-size:90%;
  border-radius:0.3rem;
  transition:0.3s;
}
a.action:hover {
  background-color:var(--color-highlight-hover);
}
a.more {
  display:inline-flex;
  align-content:center;
  justify-content:center;
  gap:0.5rem;
  transition:0.3s;
}
a.more svg {
  width:2rem;
}
a.more svg path {
  transition:0.5s ease-in-out;
}
a.more:hover svg path {
  transition:0.5s ease-in-out;
  stroke:var(--color-highlight);
}
a.social svg {
  width:2rem;
  transition:0.3s;
}
a.social:hover svg {
  opacity:0.6;
}
h1, h2, h3, header .logo {
  font-family:var(--font-family-title);
}
h1 {
  font-size:2rem;
  line-height:2.2rem;
}
h2 {
  font-size:1.6rem;
  line-height:1.8rem;
}
h3 {
  font-size:1.4rem;
  line-height:1.6rem;
}

/* Mobile first */
body {
  background-color:var(--background-color);
  background-image: url("hero.jpeg");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment:fixed;
  color:var(--color);
  font-family:var(--font-family-body);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:1.2rem;
  position:relative;
}

header {
  position:fixed;
  width:100%;
  top:0;
  left:0;
  padding:0.5rem 1rem;
  background-color:rgb(0 0 0 / 0.5);
  z-index:2;
}
header .main {
  display:flex;
}
header .logo {
  font-size:1.5rem;
  color:White;
}
header .logo > a {
  display:flex;
  justify-content:center;
  align-content:center;
  gap:0.5rem;
  transition:0.3s;
}
header .logo > a:hover {
  opacity:0.8;
}
header .logo > a svg {
  width:2rem;
}
header nav {
  flex:1;
  color:White;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
header nav > div {
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:1.8rem;
}
header nav > div.opened {
  display:flex;
  position:fixed;
  top:0;
  left:0;
  background-color:rgb(0 0 0 / 0.9);
  width:100%;
  height:100vh;
}


header nav > div a {
  letter-spacing:0.05rem;
  transition:0.3s;
 }
header nav > div a:hover {
  opacity:0.8;
}
header nav > div a.phone {
  background-color:var(--color-highlight);
  color:Black;
  padding:0.1rem 0.5rem;
  border-radius:0.3rem;
  font-family:var(--font-family-title);
  font-weight:bolder;
  border-bottom:0.3rem solid #d00000;
  border-right:0.3rem solid #d00000;
}
header nav > div a.catalog {
  background:linear-gradient(90deg, #ccffb0 0%, #ffff42 32.4%, #ffdd00 52.33333333333333%, #fff6c4 77.73333333333333%, #7cfdff 128%);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

header nav > span.burger {display:block; cursor:pointer; height:1.7rem; width:1.7rem; overflow:visible; position:relative; z-index:2; float:right}
header nav > span.burger span, 
header nav > span.burger span:before,
header nav > span.burger span:after {background-color:White; display:block; height:0.15rem; opacity:1; position:absolute; transition:0.3s ease-in-out;}
header nav > span.burger span:before, 
header nav > span.burger span:after {content:"";}
header nav > span.burger span {right:0rem; top:0.7rem; width:1.7rem;}
header nav > span.burger span:before {left:0rem; top:-0.525rem; width:1rem;}
header nav > span.burger span:after {left:0rem; top:0.525rem; width:1.25rem;}
header nav > span.burger.close span {transform:rotate(-45deg); top:0.8rem; width:1.7rem;}
header nav > span.burger.close span:before {top:0rem; transform:rotate(90deg); width:1.7rem;}
header nav > span.burger.close span:after {top:0rem; left:0rem; transform:rotate(90deg); opacity:0; width:0rem;}


section.hero {
  display:flex;
      align-items:center;
      justify-content:center;
      width:100vw;
      height:100vh;
      background-color: transparent;
      background-image: linear-gradient(180deg, #2E292540 4%, #2E2925 100%);
      position:relative;
      color:White;
    } 
    
    section.hero div.main {
      text-align:center;
      position:relative;
    }
    section.hero div.main h1 {
      font-weight:normal;
      padding:0;
      margin:0 0 1.8rem 0;
    }
    section.hero div.main h1 span.scribble {
      display:inline-block;
      position:relative;
    }
    section.hero div.main h1 span.scribble svg {
      position: absolute;
      width: 100%;
      height: .58em;
      top: 66.666667%;
      left: 0;
      display: block;
      fill:var(--color-highlight);
      z-index:0;
    }
    section.hero div.main p {
      margin:0 auto 3rem auto;
      max-width:88%;
      text-align:justify;
    }
    section.hero div.main a {
      
    }
    
    
section.products {
  width:100%;
  background-color: #2E2925;
  background-image: url("oak-background.jpg");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  position:relative;
  z-index:0;
  color:White;
  padding:1rem 0;
}
section.products::before {
  content:"";
  z-index:0;
  background-color: transparent;
  background-image: linear-gradient(0deg, #2E292570 0%, #2E2925 100%);
  opacity: 1;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events: none;
}
section.products > div.main {
  margin:0 auto;
  width:98%;
  opacity: 1;
  background-color:#443A32;
  border-radius: 1rem;
  backdrop-filter: blur(0.1rem);
  box-shadow: 0rem 2.75rem 4.5rem 0rem rgba(0,0,0,0.2);
  background-color: rgb(0 0 0 / 0.3);
  position:relative;
  z-index:10000000;
}
section.products > div.main div.list {
  display:flex;
  flex-direction:column;
  padding:2rem 0;
  z-index: 1;
}
section.products > div.main div.list > div {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-direction:column;
  row-gap:1rem;
  margin-bottom:3rem;
}
section.products > div.main div.list > div figure {
  width:100%;
}
section.products > div.main div.list > div img {
  border-radius:50%;
  width:60%;
  display:block;
  margin:0 auto;
  border:0.5rem solid rgb(255 255 255 / 0.3);
}
section.products > div.main div.list > div h2 {
  position:relative;
}
section.products > div.main div.list > div h2 svg {
  position:absolute;
  left:0;
  bottom:-0.8rem;
  width:100%;
  fill:var(--color-highlight);
}
section.products > div.main div.list > div p {
  margin:0 1rem;
}
section.products > div.main div.list > div a {
  position:relative;
  z-index:111111111;
}

section.products > div.main div.quality {
  position:relative;
  margin-top:2rem;
}
section.products > div.main div.quality div.main {
  display:flex;
  flex-direction:column;
  padding:0;
  margin:0;
  background:transparent;
}
section.products > div.main div.quality div.main > h2 {
  padding:1.6rem 1rem 0rem 1rem;
  color:var(--color-highlight);
} 
section.products > div.main div.quality div.main > h2, 
section.products > div.main div.quality div.main > p {
  flex:1;
}
section.products > div.main div.quality div.main > p {
  padding:1.6rem 1rem 1.8rem 1rem;
}

section.products > div.main div.quality svg {
  position:absolute;
  top:-3rem;
  left:1rem;
  width:4rem;
  height:4rem;
}

section.process {
  background-color:#d8d0c9;
  padding:3rem 0;
}
section.process div.header {
  margin:0 auto 2rem auto;
  width:90%;
}
section.process div.main {
  margin:0 auto;
  width:100%;
  display:flex;
  flex-direction:column;
}
section.process div.main > div {
  flex:1;
  width:inherit;
}
section.process div.main figure {
  width:80%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  padding:0;
  margin:0 auto 2rem auto;
}
section.process div.main figure::before {
  content:"";
  position:absolute;
  top:-0.5rem;
  left:-0.5rem;
  width:100%;
  height:100%;
  background-color:#685634;
  z-index:-1;
  border-radius:0.5rem;
}
section.process div.main figure img {
  border-radius:0.5rem;
  display:block;
  width:100%;
}
    
    
section.process div.steps ul, 
section.process div.steps li {
  list-style: none;
  padding: 0;
 }
section.process div.steps {
  padding:0 2rem;
}
section.process div.steps div.wrapper {
  
}
section.process div.steps div.sessions {
  position: relative;
}

section.process div.steps li {
  padding-bottom: 1.5rem;
  border-left: 2px solid #685634;
  position: relative;
  padding-left:2rem;
  margin-left:1rem;
}
section.process div.steps li:last-child {
      border: 0px;
      padding-bottom: 0;
    }
section.process div.steps li:before {
      content: "";
      width:1rem;
      height:1rem;
      background-color:var(--color-highlight);
      /*border: 1px solid #777;*/
      box-shadow: 3px 3px 0px rgb(0 0 0 / 0.2);
      border-radius: 50%;
      position: absolute;
      left:-0.6rem;
      top: 0px;
    }
    
  section.process div.steps .step {
    color:Black;
    font-size:1.4rem;
    line-height:1.6rem;
    font-weight:bold;
  }

  
section.gallery {
  display:grid;
  grid-template-columns:repeat(2, 1fr); 
}
section.gallery > figure {
  background-color:Black;
  display:flex;
  align-content:center;
  justify-content:center;
  padding:0;
  margin:0;
  overflow:hidden;
}
section.gallery > figure img {
  display:block;
  width:100%;
  transition: transform 1.1s; /* Animation */
}
section.gallery > figure img:hover {
  transform: scale(1.5);
}

section.reviews {
  width:100%;
  background-color: #2E2925;
  background-image: url("wood-background.jpg");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  position:relative;
  color:White;
  padding:1rem 0 3rem 0;
}
section.reviews > p {
  text-align:center;
}
section.reviews > p > svg {
  width:2rem;
}
section.reviews > div.main {
  display:grid;
  grid-template-columns:repeat(1, 1fr);
  grid-row-gap:2rem; 
  width:90%;
  margin:0 auto;
  color:Black;
}
section.reviews > div.main div:first-child h2 {
  margin:1rem 0 1.4rem 0;
}
section.reviews > div.main div:first-child p {
  margin-bottom:1rem;
}
section.reviews > div.main div:first-child a {
  
}
section.reviews > div.main .review {
  height:100%;
  background-color:rgb(255 255 255 / 0.1);
  backdrop-filter: blur(0.9rem);
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  flex-direction:column;
  box-shadow:5px 5px 0px 0px var(--color-highlight);
}
    section.reviews > div.main .review blockquote {
      padding:1.5rem;
      margin:0;
      flex:1;
    }
    section.reviews > div.main .review p {
      padding:0 1.5rem .5rem 1.5rem;
      font-weight:bold;
    }
    section.reviews > div.main .review svg {
      width:1.4rem;
      fill:var(--color-highlight);
    }
    section.contact {
      background-color:rgb(0 0 0 / 0.7);
      color:White;
      text-align:center;
      padding:5rem 0;
    }
    section.contact > svg {
      width:4rem;
    }
    section.contact > h2 {
      margin-bottom:1.8rem;
    }
    section.contact > p {
      margin:0 auto 3rem auto;
      width:70%;
    }
    section.contact > a {
    
    }
    
    
    
    footer {
      background-color:#d8d0c9;
      padding:3rem 1rem;
    }
    footer > div.main {
      width:90%;
      margin:0 auto;
      display: grid; 
      grid-row-gap: 1rem; 
      grid-template-columns:repeat(1, 1fr); 
    }
    footer > div.copyright {
      padding:3rem 0;
      width:var(--section-width-center);
      margin:4rem auto 0 auto;
      text-align:center;
      border-top:1px solid #ccc;
    }
    
/* Desktop */
@media screen and (min-width:1024px) {/*992*/
  h1 {
    font-size:4rem;
    line-height:5rem;
  }
  h2 {
    font-size:2rem;
    line-height:3rem;
  }
  h3 {
    font-size:1.6rem;
    line-height:2rem;
  }
  header {
    padding:1.5rem 3rem;
  }
  header .logo {
    font-size:2rem;
  }
  header .logo > a svg {
    width:3rem;
  }
  header nav > div {
    display:flex;
    justify-content:flex-end;
    flex-direction:row;
  }
  header nav > span.burger {
    display:none;
  }
  
  section.hero div.main h1 {
    font-size:4.5rem;
    margin:0 0 2.5rem 0;
  }
  
  section.hero div.main p {
    margin:0 auto 3rem auto;
    max-width:60%;
  }
  
  section.products {
    padding:3rem 0;
  }
  section.products > div.main {
    width:70%;
  }
  section.products > div.main div.list {
    flex-direction:row;
    padding:2rem 0;
  }
  section.products > div.main div.list > div {
    margin-bottom:6rem;
  }
  section.products > div.main div.list > div img {
    width:70%;
  }
  section.products > div.main div.list > div h2 {
    font-size:2rem;
  }
  section.products > div.main div.quality div.main {
    flex-direction:row;
  }
  section.products > div.main div.quality div.main > h2 {
    font-size:2rem;
  }
  section.products > div.main div.quality div.main > h2, 
  section.products > div.main div.quality div.main > p {
    padding:2rem 3rem;
  }
  section.products > div.main div.quality svg {
    top:-4rem;
    left:50%;
  }
  section.process div.header {
    width:50%;
  }
  section.process div.main {
    flex-direction:row;
    width:var(--width-section-main);
  }
  section.process div.main figure {
    width:100%;
  }
  section.process div.steps {
    padding:0 5rem;
  }
  section.process div.steps li {
    padding-left:4rem;
  }
  section.gallery {
    grid-template-columns:repeat(3, 1fr); 
  }
  section.reviews {
    padding:3rem 0;
  }
  section.reviews > p > svg {
    margin-bottom:1rem;
  }
  section.reviews > div.main {
    grid-template-columns:repeat(3, 1fr);
    grid-column-gap: 1rem; 
    width:var(--width-section-main);
  }
  footer {
    padding:3rem;
  }
  footer > div.main {
    width:var(--section-width-center);
    grid-column-gap: 1rem; 
    grid-template-columns:repeat(3, 1fr); 
  }
}