:root{
--color-dark-bg: #2A362B;
--color-dark-text: #333333;
--color-light-text: #E6E6E6;
--color-primary-green: #A9C5A0;
--color-light-accent: #C7D9C4;
--color-hover-text: #D1E1CE;
--color-unavailable: #793232;
--color-unavailable-text: #FFB0B0;
}
html {
scroll-behavior: smooth;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family:'Lora', serif;
background:var(--color-dark-bg);
color:var(--color-light-text);
line-height:1.6;
}
p{margin-bottom: 1em; text-indent: 0;}
a{
color: var(--color-primary-green);
text-decoration: none;
transition: color 0.3s;
}
a:hover{
color: var(--color-hover-text);
}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
section .container{max-width:1000px;padding: 2rem 20px;}
section{padding:3.5rem 0 2rem 0;border-bottom:1px solid rgba(169,197,160,.1);}
.no-border-after{border-bottom: none !important;}
h2{
font-family:'Libre Baskerville', serif;
font-size: clamp(1.6rem, 4.5vw, 2.3rem);
margin-bottom:1.5rem;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--color-primary-green);
text-align:center;
padding-top: 1.5rem;
position: relative;
}
h2::before{
content: "❊";
color: var(--color-primary-green);
font-size: 1.8rem;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
line-height: 1;
}
h3{
font-family: 'Lora', sans-serif;
color: #F0F0F0;
margin-bottom: 1rem;
font-weight: 500;
font-size: 1.4rem;
}
#filozofia, #pobyty, #warsztaty, #kontakt, #co-zabrac, #rezerwacje{
padding-top: 120px;
margin-top: -120px;
}
#rezerwacje .container{display: flex;flex-direction: column; align-items: center;}
#rezerwacje p{text-align: justify; max-width: 700px; margin-left: auto;margin-right: auto;margin-bottom: 1em; text-indent: 0;}
#rezerwacje .group-info{
margin: 1.5rem auto 2.5rem auto;
padding: 1rem 2rem;
font-weight: 500;
font-size: 1.1rem;
color: var(--color-primary-green);
text-align: center;
max-width: 700px;
background: rgba(169, 197, 160, 0.1);
border: 1px solid var(--color-primary-green);
border-radius: 4px;
text-indent: 0;
}
nav{position: fixed;top: 0;left: 0;width: 100%;z-index: 10;padding: 0;margin-top: 10px;}
.nav-background{
background: rgba(42, 54, 43, 0.4);
backdrop-filter: blur(5px);
width: 100%;
padding: 40px 10px 10px 10px;
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: box-shadow 0.5s ease-in-out, background-color 0.3s, backdrop-filter 0.3s, padding 0.3s;
}
.nav-background.scrolled{
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
background: rgba(42, 54, 43, 0.7);
}
nav ul li a {
white-space: nowrap;
}
.logo{
color: var(--color-hover-text);
font-family: 'Libre Baskerville', serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.2;
text-align: center;
position: relative;
margin: 0 auto 10px auto;
transition: opacity 0.3s, transform 0.3s;
}
.leaf-container{
background: var(--color-primary-green);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
margin-top: -25px;
margin-bottom: 10px;
z-index: 11;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s;
}
.logo:hover {
    opacity: 0.9;
    cursor: pointer; 
}
.logo:hover .leaf-container {
    box-shadow: 0 0 15px var(--color-primary-green);
}
.leaf-icon{
color: var(--color-dark-bg);
font-size: 2rem;
line-height: 1;
}
.nav-right-content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.nav-links {
display: flex;
align-items: center;
margin-left: 0;
}
.nav-controls {
display: flex;
align-items: center;
gap: 10px;
margin-left: 10px;
}
nav ul{list-style: none;display: flex;margin: 0;padding: 0;}
nav ul li{margin-left: 0;}
nav ul li a{
color: var(--color-light-text);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid rgba(169, 197, 160, 0.3);
padding: 5px 12px;
border-radius: 4px;
display: flex;
align-items: center;
transition: border-color 0.3s, background-color 0.3s;
}
nav ul li:not(:last-child) a {
margin-right: 5px;
}
nav ul li a:not(.icon-button)::before{
content: "🌿";
color: var(--color-primary-green);
font-size: 1.1rem;
margin-right: 8px;
line-height: 1;
}
nav ul li a:hover{
color: var(--color-hover-text);
border-color: rgba(169, 197, 160, 0.7);
background-color: rgba(169, 197, 160, 0.05);
}
.icon-button{
width: 30px;
height: 30px;
padding: 0;
margin-top: 0; 
border-radius: 50%;
justify-content: center;
align-items: center;
display: flex;
text-transform: none !important;
letter-spacing: normal !important;
color: transparent;
border: 1px solid rgba(169, 197, 160, 0.3);
background: transparent;
position: relative;
top: -5px; 
}
.icon-button::before{
content: none !important;
}
.icon-button i{
color: var(--color-primary-green);
font-size: 0.9rem;
margin: 0;
}
.icon-button.muted i{
color: #999999;
}
.icon-button.muted:hover i{
color: var(--color-primary-green);
}
.icon-button:hover{
background-color: rgba(169, 197, 160, 0.1);
border-color: var(--color-primary-green);
}
#menu-toggle-btn{
display: none;
width: 38px;
height: 38px;
justify-content: center;
align-items: center;
padding: 0;
z-index: 100;
border: 1px solid rgba(169, 197, 160, 0.3);
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s;
}
#menu-toggle-btn:hover{
background-color: rgba(169, 197, 160, 0.1);
border-color: var(--color-primary-green);
}
#menu-toggle-btn i{
color: var(--color-primary-green);
font-size: 1.3rem;
margin-top: -1px;
}
#menu-toggle-btn.is-active i{
transform: rotate(90deg);
}
header{position:relative;height:100vh;padding-top:120px;overflow:hidden;}
header video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.65);z-index:1;}
.hero-content{position:relative;z-index:2;height:calc(100% - 120px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}
.hero-content h1{
font-family:'Libre Baskerville',serif;
font-size:4rem;
letter-spacing:.2em;
text-transform:uppercase;
color: #F0F0F0;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.hero-content p{
margin-top:1rem;
font-size:1.2rem;
color:var(--color-hover-text);
font-weight: 300;
text-align: center;
}
.btn{
margin-top:2.5rem;
padding:1rem 2.5rem;
border:1px solid var(--color-primary-green);
border-radius:5px;
color:var(--color-primary-green);
background:rgba(169,197,160,.15);
backdrop-filter:blur(8px);
transition:.3s;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn:hover{
background:rgba(169,197,160,.5);
color:var(--color-dark-bg);
border: 1px solid rgba(169, 197, 160, 0.5);
}
.parallax-handpan,
.parallax-snycerstwo,
.parallax-las{
position: relative;
height: 220px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-top: 0;
margin-bottom: 0;
border-top: none;
border-bottom: none;
overflow: hidden;
}
.parallax-handpan::before,
.parallax-snycerstwo::before,
.parallax-las::before{
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .65);
border-radius: 0;
}
.parallax-handpan{background-image:url('imges/handpan.png');}
.parallax-snycerstwo{background-image:url('imges/snycerstwo.png');}
.parallax-las{background-image:url('imges/las.png');}
.grid{display:grid;gap:2rem;}
#pobyty .grid{grid-template-columns:repeat(2,1fr);}
#warsztaty .grid{
  grid-template-columns: repeat(3, 1fr);
}
.card{
  background: rgba(0,0,0,.4);
  padding: 1.5rem 2rem 2rem;
  border: 1px solid rgba(169,197,160,.2);
  backdrop-filter: blur(5px);
  transition: .3s;
  box-shadow: 0 4px 15px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
}
.card:hover{
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,.3);
}
.card-image,
.card-video{
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 1.2rem;
  border-radius: 4px;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}
.card-image{
  object-fit: cover;
}
.card-video{
  position: relative;
  background: #000;
}
.card-video video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card:hover .card-video video{
  transform: scale(1.03);
  transition: transform 0.6s ease;
}
#warsztaty .card p{
  margin-top: 10px;
  text-align: left;
}
.video-play-btn{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-unavailable);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform .2s ease;
}

.video-play-btn:hover{
  transform: scale(1.1);
}
.video-play-btn::before{
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #000;
  border-radius: 4px;
}
.card-video.is-playing .video-play-btn{
  background: var(--color-primary-green);
}
.card-video.is-playing .video-play-btn::before{
  width: 18px;
  height: 24px;
  margin-left: 0;
  border: none;
  background:
    linear-gradient(
      to right,
      #000 0 6px,
      transparent 6px 12px,
      #000 12px 18px
    );
}

ul, ol{list-style: none;margin-left: 0;padding-left: 0;}
ul li{margin-bottom: 0.6rem;font-weight: 300;text-align: left;}
#co-zabrac ul{
max-width: fit-content;
margin: 0 auto 1.5rem auto;
}
#pobyty .card ul li,#co-zabrac ul li{padding-left: 25px;position: relative;}
#pobyty .card ul li::before,#co-zabrac ul li::before{
content: "🌿";
color: var(--color-primary-green);
font-size: 1.1rem;
position: absolute;
left: 0;
top: 0;
line-height: 1.6;
}
#co-zabrac .gastronomy-note{
max-width: 600px;
margin: 3rem auto 0 auto;
padding: 1rem 1.5rem;
text-align: center;
font-style: italic;
font-weight: 300;
font-size: 0.95rem;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(169, 197, 160, 0.2);
border-radius: 4px;
color: #B0B0B0;
text-indent: 0;
}
.logo-separator{display: block;width: fit-content;margin: 3rem auto 0 auto;pointer-events: none;text-align: center;}
.logo-separator .leaf-container-lg{
background: var(--color-primary-green);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 6px auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.logo-separator .leaf-icon-lg{
color: var(--color-dark-bg);
font-size: 2.5rem;
line-height: 0.5;
}
.logo-separator span{
color: var(--color-hover-text);
font-family: 'Libre Baskerville', serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.2;
}
footer{
padding:2.5rem 0;
font-size:.8rem;
letter-spacing:.1em;
border-top:1px solid rgba(169,197,160,.1);
color: #B0B0B0;
}
.footer-content-primary{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0 10px;
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer-logo-center{
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 0.6rem;
text-decoration: none;
color: var(--color-light-text);
white-space: nowrap;
padding: 0;
border: none;
}
.footer-logo-center:hover{
    color: var(--color-hover-text); /* Zmiana koloru tekstu */
    opacity: 1;
    cursor: pointer;
}
.footer-logo-center:hover .leaf-container {
    box-shadow: 0 0 15px var(--color-primary-green); /* Lekka poświata na kółku */
}
.footer-logo-center span{
font-family: 'Libre Baskerville', serif;
font-weight: 700;
}
.footer-logo-center .leaf-container{
width: 30px;
height: 30px;
margin-top: 0;
margin-bottom: 2px;
}
.footer-logo-center .leaf-icon{
font-size: 1.3rem;
}
.footer-link{
text-decoration: none;
font-size: 0.7rem;
opacity: 0.6;
color: var(--color-light-text);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid rgba(169, 197, 160, 0.2);
padding: 6px 10px;
border-radius: 4px;
display: flex;
align-items: center;
transition: all 0.3s;
}
.footer-link::before{
content: "🌿";
color: var(--color-primary-green);
font-size: 0.9rem;
margin-right: 6px;
line-height: 1;
}
.footer-link:hover{
opacity: 1;
color: var(--color-hover-text);
border-color: rgba(169, 197, 160, 0.7);
background-color: rgba(169, 197, 160, 0.05);
}
#kontakt p{
text-align: center;
font-weight: 700;
color: var(--color-light-text);
}
#contact-list{font-weight: 700;margin: 1.5rem auto 0 auto; padding-left: 0;}
#contact-list li{padding: 0 40px; position: relative;list-style: none;margin-bottom: 0.8rem;display: block; width: fit-content;margin-left: auto; margin-right: auto;}
#contact-list li::before{
content: "🌿";
color: var(--color-primary-green);
font-size: 1.1rem;
position: absolute;
left: 10px;
top: 0;
line-height: 1.6;
transform: scaleX(-1);
}
#contact-list li::after{
content: "🌿";
color: var(--color-primary-green);
font-size: 1.1rem;
position: absolute;
right: 10px;
top: 0;
line-height: 1.6;
}
#contact-list li a{
color: var(--color-primary-green);
text-decoration: none;
}
.modal-overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s, visibility 0s 0.3s;
display: flex;
justify-content: center;
align-items: center;
}
.modal-overlay.is-active{
visibility: visible;
opacity: 1;
transition: opacity 0.3s;
}
.modal-content{
background: var(--color-dark-bg);
color: var(--color-light-text);
padding: 40px;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
max-width: 600px;
width: 90%;
position: relative;
border: 1px solid rgba(169, 197, 160, 0.4);
transform: scale(0.95);
transition: transform 0.3s ease-out;
}
.modal-overlay.is-active .modal-content{
transform: scale(1);
}
.modal-content h3{
text-align: center;
font-size: 2rem;
margin-bottom: 1.5rem;
color: var(--color-primary-green);
font-family: 'Libre Baskerville', serif;
}
.close-btn{
position: absolute;
top: 10px;
right: 15px;
font-size: 30px;
font-weight: 300;
line-height: 1;
color: var(--color-primary-green);
}
.close-btn:hover{
color: #F0F0F0;
}
.close-btn::after{
content: none;
}
.zrodla-lista{list-style: none;margin: 2rem 0;padding: 0;text-align: left;}
.zrodla-lista li{margin-bottom: 1rem;padding-left: 1.5rem;position: relative;font-weight: 300;}
.zrodla-lista li::before{
content: "•";
color: var(--color-primary-green);
position: absolute;
left: 0;
font-size: 1.5rem;
line-height: 0.8;
}
.calendar-wrapper{
width: 100%;
max-width: 650px;
margin: 0rem auto 0;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(169, 197, 160, 0.4);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
margin-bottom: 2rem;
}
.calendar-nav{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding: 0 10px;
border-bottom: 1px solid rgba(169, 197, 160, 0.2);
padding-bottom: 15px;
}
.calendar-nav h3{
margin: 0;
font-size: 1.5rem;
color: var(--color-light-accent);
font-family:'Lora', serif;
text-transform: none;
letter-spacing: normal;
}
.calendar-nav .nav-btn{
background: transparent;
border: 1px solid rgba(169, 197, 160, 0.4);
color: var(--color-primary-green);
font-size: 1.2rem;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.calendar-nav .nav-btn:hover{
background-color: rgba(169, 197, 160, 0.1);
color: var(--color-light-accent);
}
.legend{
display: flex;
justify-content: center;
gap: 20px;
font-size: 0.9rem;
color: #B0B0B0;
margin-bottom: 1rem;
}
.legend-item::before{
content: '';
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
border-radius: 50%;
vertical-align: middle;
}
.legend-item.has-event::before{
background-color: var(--color-primary-green);
}
.legend-item.has-stay::before{
background-color: #6997B0;
}
.legend-item.unavailable::before{
background-color: var(--color-unavailable);
}
.calendar{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
border: 1px solid rgba(169, 197, 160, 0.4);
border-radius: 4px;
overflow: hidden;
}
.day-name{
font-weight: 700;
color: var(--color-primary-green);
padding: 8px 0;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
background: rgba(0, 0, 0, 0.2);
border: none;
}
.day{
background: rgba(0, 0, 0, 0.1);
color: var(--color-light-text);
padding: 10px 0;
transition: background-color 0.3s;
font-weight: 400;
font-size: 1.1rem;
cursor: default;
position: relative;
border: none !important;
border-radius: 0 !important;
}
.day.empty{
background: transparent;
cursor: default;
}
.day.has-event{
background: rgba(169, 197, 160, 0.1);
color: var(--color-primary-green);
font-weight: 700;
cursor: pointer;
}
.day.has-event:hover{
background: rgba(169, 197, 160, 0.3);
}
.day.has-stay::after{
content: "🏠";
position: absolute;
bottom: 2px;
right: 2px;
font-size: 0.7rem;
line-height: 1;
opacity: 0.8;
}
.day.unavailable{
background: rgba(121, 50, 50, 0.2);
color: var(--color-unavailable-text);
font-weight: 700;
opacity: 0.8;
text-decoration: line-through;
cursor: default;
}
.day.selected{
background: var(--color-light-accent);
color: var(--color-dark-bg);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}
.details-card{
padding: 20px;
margin-top: 15px;
border-top: 1px solid rgba(169, 197, 160, 0.2);
text-align: left;
}
.details-card h4{
font-size: 1.2rem;
color: var(--color-light-accent);
margin-bottom: .5rem;
text-align: left;
}
.details-card h5{
font-size: 1.1rem;
color: var(--color-primary-green);
margin: 5px 0;
}
.details-card p{
margin: 5px 0 10px 0;
font-size: .95rem;
text-align: left;
}
.small-btn{
padding: .75rem 2rem;
font-size: .9rem;
margin-top: 1rem;
}
.btn{
border:1px solid var(--color-primary-green);
border-radius:5px;
color:var(--color-primary-green);
letter-spacing:.15em;
background:rgba(169,197,160,.15);
transition:.3s;
cursor: pointer;
}
.btn:hover{
background:rgba(169,197,160,.5);
color:var(--color-dark-bg);
}
.stay-option{
margin-top: 10px;
padding: 10px;
border: 1px solid rgba(169, 197, 160, 0.3);
border-radius: 4px;
background: rgba(169, 197, 160, 0.05);
}
.stay-option h5{
color: var(--color-primary-green);
margin-top: 0;
margin-bottom: 5px;
}
.stay-option label{
display: flex;
align-items: center;
cursor: pointer;
font-size: 1rem;
color: var(--color-light-text);
}
.stay-option input[type="checkbox"]{
margin-right: 10px;
width: 18px;
height: 18px;
accent-color: var(--color-primary-green);
}
.author-info{
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 5px 15px;
border-top: 1px solid rgba(169, 197, 160, 0.08);
background: rgba(22, 26, 21, 0.3);
}
.author-link-tile{
text-decoration: none;
color: #999999;
font-size: 0.75rem;
font-weight: 400;
text-transform: none;
letter-spacing: 0.05em;
padding: 4px 8px;
border: 1px solid rgba(169, 197, 160, 0.1);
border-radius: 3px;
opacity: 0.8;
transition: all 0.3s;
}
.author-link-tile:hover{
color: var(--color-hover-text);
border-color: var(--color-primary-green);
opacity: 1;
background-color: rgba(169, 197, 160, 0.05);
}
.author-link-tile p{
margin: 0;
padding: 0;
text-indent: 0;
line-height: 1;
}
@media(max-width:768px){
section{padding:1.5rem 0 1rem 0;}
section .container{padding: 2rem 20px;}
.calendar-wrapper{padding: 15px;}
.calendar-nav{flex-direction: column;gap: 10px;align-items: flex-start;}
.hero-content h1{font-size: clamp(2.5rem, 8vw, 3.5rem);}
.grid{grid-template-columns:1fr!important;}
.parallax-handpan,.parallax-snycerstwo,.parallax-las{background-attachment:scroll;height:150px;}
.parallax-handpan::before,.parallax-snycerstwo::before,.parallax-las::before{background: rgba(0, 0, 0, 0.55);}
.logo-separator{margin: 2rem auto 0 auto;}
.logo-separator .leaf-container-lg{width: 45px;height: 45px;}
.logo-separator .leaf-icon-lg{font-size: 2.2rem;}
.logo-separator span{font-size: 1.1rem;}
footer{padding: 2rem 0 1.5rem 0;}
.modal-content{padding: 30px 20px;}
.author-info{
flex-direction: column;
justify-content: center;
gap: 8px;
padding-top: 10px;
background: rgba(169, 197, 160, 0.08);
}
.author-link-tile{
width: auto;
text-align: center;
}
.footer-content-primary{
flex-direction: column;
text-align: center;
gap: 10px;
position: relative;
padding: 10px 20px 20px;
}
.footer-content-primary span:first-child{order: 1; font-size: 0.85rem;}
.footer-logo-center{
position: static;
transform: none;
order: 2;
font-size: 0.8rem;
}
.footer-logo-center .leaf-container{width: 25px; height: 25px;}
.footer-logo-center .leaf-icon{font-size: 1.1rem;}
.footer-link{order: 3;}
}
@media(max-width:670px){
.nav-background{
flex-direction: row;
justify-content: space-between;
padding: 10px 10px;
align-items: center;
}
.logo{
margin-bottom: 0;
margin: 0;
margin-right: 5px;
}
.leaf-container{
margin-top: 0;
width: 30px;
height: 30px;
margin-bottom: 0.5rem;
margin-right: 5px;
}
.leaf-icon{
font-size: 1.5rem;
line-height: 1.2;
}
.nav-right-content {
justify-content: flex-end;
width: auto;
}
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: rgba(42, 54, 43, 0.95);
border-top: 1px solid rgba(169, 197, 160, 0.4);
padding: 10px 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
z-index: 9;
flex-direction: column;
align-items: center;
}

.nav-background .nav-links.is-active{
display: flex;
}

.nav-links ul {
flex-direction: column;
width: 100%;
}

#menu-toggle-btn{
display: flex;
margin: 0 0 0 10px;
}

nav ul li{
width: 100%;
margin-left: 0;
text-align: center;
}
nav ul li a{
display: block;
padding: 12px 20px;
margin: 5px 20px;
border: none;
font-size: 1rem;
border-bottom: 1px solid rgba(169, 197, 160, 0.2);
}
nav ul li:last-child a {
border-bottom: none;
}

nav ul li a:not(.icon-button)::before{
content: none;
}
.icon-button{
    top:0;
}
nav ul li:not(:last-child) a {
margin-right: 0;
}
}
@media(min-width:671px) and (max-width:880px){
#menu-toggle-btn{
display: none;
}
.logo{
margin: 0 auto 10px auto;
}
.leaf-container{
margin-right: 0;
}
.nav-right-content {
justify-content: center;
width: auto;
}
.nav-controls {
margin-left: 20px;
}
.nav-links{
display: flex !important;
flex-direction: row;
position: static;
width: auto;
}
nav ul li a {
font-size: 0.75rem;
padding: 6px 10px;
letter-spacing: 0.08em;
}
nav ul li a::before {
font-size: 0.9rem;
}
nav ul li a:not(.icon-button)::before{
content: "🌿";
}
}
@media(min-width:881px){
#menu-toggle-btn{
display: none;
}
.nav-background{
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 40px 10px 10px 10px;
}
.logo{
margin: 0;
align-items: center;
margin-right: 5px;
}
.leaf-container{
margin-right: 0;
}
.nav-right-content {
justify-content: flex-end;
width: auto;
}
.nav-controls {
margin-left: 20px;
}
.nav-links{
display: flex !important;
flex-direction: row;
position: static;
width: auto;
}
nav ul li a:not(.icon-button)::before{
content: "🌿";
}
}