@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');

button {
  border-radius: 5px!important
}
html {
  scroll-behavior: smooth;
}
.sora {
  font-family: 'Sora', sans-serif !important;
}
:root {
  --primary-color: black;
  --color-tertiary: #196f3d
}
.tertiary-bg {
  background: var(--color-tertiary);
}
.btn-tertiary {
  background: transparent;
  border: 1px black solid;
  border-radius: 0;
  transition: 450ms ease;
}
.btn-tertiary:hover {
  background: transparent;
  border: 1px var(--color-tertiary) solid;
  border-radius: 15px;
}
.color-tertiary {
  color: var(--color-tertiary)
}
#header {
  background: rgba(255,255,255,0.5);
  transition: 450ms ease;
}
#header.solid{
  background: rgba(255,255,255,1);
  border-bottom: 1px grey solid;
}
div  {
  overflow: hidden
}
.hero {
  width: 100%;
  height: min(800px, 80vh);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nav {
  margin: 0 10px ;
  font-size: 16px
}
.nav.active {
  box-sizing: border-box;
  font-weight: bold;
  color: var(--color-tertiary)
}
.heading {
  transition: 1000ms ease;
  left: 0px;
}
.heading.right30 {
  left: 100px;
  background: var(--color-tertiary)!important;
  color: white
}
#menu_toggle {
  display: none;
}
.border-change {
  transition: 450ms ease;
}
.rise{
  position: relative;
  transition: 2s ease;
  top: 0;
}
@media(min-width: 950px){
  .rise.now {
    top: -100px;
  }
  .hero {
    align-items: baseline;
  }
}
  .hero-img {
    transform: rotate(-90deg)
  }
.border-change.border-alternative {
  border-color: var(--color-tertiary)!important
}
.threeLinks.inView > *:first-child h1{
  left: 100px;
  background: var(--color-tertiary)!important;
  color: white!important;
}
.threeLinks.inView > *:last-child div{
  border-color: var(--color-tertiary)!important
}
img {
  /* -webkit-filter: grayscale(100%);
  filter: grayscale(100%); */
  transition: 450ms ease !important;
}
img:hover {
  /* -webkit-filter: graysc */ale(0%);
  /* filter: grayscale(0%); */
}
@media(max-width: 950px){
  img.inView {
    /* -webkit-filter: grayscale(0%)!im */portant;
    /* filter: grayscale(0%)!important; */
  }
}
@media(min-width: 950px){
.hero img{
  width: 100%;
}


}

@media(max-width: 950px){
  .hero img{
    height: min(100%);
}

#menu {
  position: fixed !important;
  display: block!important;
  flex-wrap: wrap;
  top: 90.48px;
  width: 300px;
  height: 100vh;
  overflow: scroll;
  right: -300px;
  background: ghostwhite;
  transition: 450ms ease;
  border-left: 1px grey solid;
}
#menu_toggle {
  display: block;
  z-index: 1000;
  background: transparent !important;
  border: none;

}
#menu_toggle img {
  height: 36px;
  width: 36px;
}
#menu.toggled {
  right: 0;
  align-items: baseline;
}
#menu > * {
  display: flex;
}
#menu > * >*{
  width: 100%!important;
  gap: 0;
  margin: 1rem;
}
}

.zoom {
  transition: 5.5s ease-in;
}
.zoom:hover {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


/* GALLERY */

.gallery-container {
  max-height: 550px;
  overflow: scroll;
  /* width */

}
::-webkit-scrollbar {
  width: 10px;
/* Track */
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background:var(--color-tertiary);
  border-radius: 15px;
  height: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  
}

/*  */
.workshop_intro span {
  font-weight: bold
}
.animate__animated.bouncer {
  background: white;
  border: 1px grey solid;
  transition: 1.75s ease;
}
.box-shadow_all {
  -webkit-box-shadow: 0 0 5px 2px rgb(130, 127, 127);
  -moz-box-shadow: 0 0 5px 2px rgb(130, 127, 127);
  box-shadow: 0 0 5px 2px rgb(130, 127, 127)
}
.btn-grey {
  background: grey;
  transition: 750ms ease;
}
.btn-white {
  background: white;
  border: 1px grey solid;
  transition: 750ms ease;
}
button:hover {
  border-color: var(--color-tertiary)!important
}

.review {
  background: transparent;
  transition: 450ms ease;
}
.review:hover {
  background: var(--color-tertiary);
  color: white;
}
.review.inView {
  background: var(--color-tertiary);
  color: white;
}

btn {
  cursor: pointer!important
}
.bk-list li {
  transition: 450ms ease;
  /* -webkit-filter: grayscale(100%); */
  /* filter: grayscale(100%)!important */
}
.bk-list li:hover {
  /* -webkit-filter: grayscale(0%); */
  /* filter: grayscale(0%)!important; */
}
@media(max-width: 950px){
  .bk-list li:hover {
    /* -webkit-filter: grayscale(0%);
    filter: grayscale(0%)!important; */
  }
}

/* lineAdjust */

#portfolio_line,
#intro_line,
#about_line{
  max-width: 300px;
  width: 0px;
  height: 3px;
   background: var(--color-tertiary);
}
#intro_line{
  max-width: 100%;
}