h3 {
    color:#6fb76f;
}

.flexy {
    display:flex;
    justify-content: center;
    margin-top:-45px;
}

.stone {
    height:115px;
    margin-top:0px;
}

.yogaf {
    height:250px;
    margin-top:40px;
 
}

footer {
    
padding-top:175px;
text-align: center;
padding-bottom:20px;
background-color: #ffeed1;
margin-top:125px;
color:rgb(7, 7, 7);
width:100%;

}

footer p {
text-align: center;
font-size:1em;
}


.centered {
    margin:auto;
    text-align: center;
}

.intro {
    
    text-align: center;
    width:80%;
    margin:auto;
    margin-top:70px;
}

.intro h1 {
    font-size:3.5em;
    margin-bottom:25px;
    font-family: 'Playfair Display', serif;
letter-spacing:9px;
text-transform: uppercase;
}

.intro h2 {
    font-size:2.5em;
    margin:35px;
    text-transform: capitalize;
    font-style: italic;
    color: #2ea721;
}

.intro_txt {
    margin-top:60px;
    text-align: left;
    
}



.hero_div {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top:120px;
}

#particles-js {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Keep particles behind the content */
}

.hero {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

z-index: -2; /* Ensure image stays behind particles */
}


.hero_div {
position: relative;
height: 92vh;
overflow: hidden;
}

#particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}

.hero {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
opacity: 1; /* Optional: makes particles more visible */

}


.floating-words {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   
}

.floating-words.left {
    left: 15%; /* 15% from the left */
}

.floating-words.right {
    left: 65%; /* 15% from the right */
}

.floating-words span {
    position: relative;
    font-family: 'Playfair Display', serif;
    font-size: 4em;
    letter-spacing: 6px;
    color: #f9e68ab9;
    animation: floatWord 20s ease-in-out infinite;
    opacity: 0;
    white-space: nowrap;
    margin-bottom: 20px; /* Adds space between words */
top:50vh;

}

/* Continuous smooth scrolling animation */
@keyframes floatWord {
    0% {
        transform: translateY(0vh); /* Start off-screen below the viewport */
        opacity: 0; /* Fully transparent */
    }

    80% {
    
        opacity: 1; /* Fully transparent */
    }
 
    100% {
        transform: translateY(-500%); /* End above the viewport */
        opacity: 0; /* Fully transparent */
    }
}
/* Sequential timing for each word */
.floating-words span:nth-child(1) {
    animation-delay: 0s;
}

.floating-words span:nth-child(2) {
    animation-delay: 1s;
}

.floating-words span:nth-child(3) {
    animation-delay: 2s;
}


.floating-words.right span:nth-child(1) {
    animation-delay: 1s;
}

.floating-words.right span:nth-child(2) {
    animation-delay: 2s;
}

.floating-words.right span:nth-child(3) {
    animation-delay: 3s;
}




/* Base styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}

body {
font-size: 1rem; /* = 16px by default */
line-height: 1.6;

}


@media (min-width: 1440px) {
body {
font-size: 1.125rem; /* 18px */
}
}

.site-header {
display: flex;
justify-content: space-between;
align-items: center;
height:120px;
padding:10px 20px;
position: fixed;
top: 0;
width: 100vw;
background: #fbf5eb;
z-index: 1000;
}


.header-left {
display: flex;
align-items: center;
padding-top:20px;
}

.logo {
height: 110px;
margin-right: 0px;
margin-left:50px;
margin-top:-10px;
}




/* Navigation links */
.navbar a {
text-decoration: none;
color: rgb(44, 44, 44); /* Default color for transparent background */
font-weight: 500;
transition: color 0.3s ease;
font-size:1.1em;
font-family: 'Open Sans', sans-serif;
letter-spacing:2px;
}





.site-title {
font-size: 2em;
text-transform: uppercase;
margin-left:30px;
color: rgb(0, 0, 0);  
transition: color 0.3s ease;
font-family: 'Playfair Display', serif;
letter-spacing:6px;
}



/* Change to black after scroll */
.site-header.scrolled .site-title {
color: black;
}



.navbar ul {
margin-top:45px;
margin-right:25px;
display: flex;
list-style: none;
gap: 30px;
}

@media (max-width: 1700px) {

/* Hamburger styles */
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
gap: 5px;
}

.hamburger span {
width: 25px;
height: 3px;
background: black;
transition: 0.3s;
}

.hamburger {
  width: 30px;
  height: 20px;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger span {
  display: block;
  height: 3px;
  background: #333;
  transition: all 0.3s ease;
  border-radius: 2px;
}

/* Transform into X when open */
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}


/* Mobile menu hidden by default */

.navbar {
position: absolute;
top: 120px;
left: 0;
width: 100%;
background: white;
display: none;
flex-direction: column;
align-items: flex-start;
padding: 10px 20px;
height:100vh;
}

.site-title {
    font-size:16px;
    margin-left:0px;
    margin-top:-20px;
}

.navbar.open {
display: flex;
}

.navbar ul {
    margin-top:15px;
flex-direction: column;
width: 100%;
text-align: left;
}

.navbar li {
width: 100%;
padding: 5px 0;
}

.hamburger {
display: flex;
margin-right:20px;
}


.logo {margin-left:0px;
height:90px;}


.floating-words span {
    position: relative;
    font-family: 'Playfair Display', serif;
    font-size: 2em;
    letter-spacing: 6px;
    color: #f9e68ab9;
    animation: floatWord 20s ease-in-out infinite;
    opacity: 0;
    white-space: nowrap;
    margin-bottom: 20px; /* Adds space between words */
top:50vh;
margin-left:-40px;

}

.right {
    margin-left:-20px;
}


.intro h1{
    font-size:1.7em;
}

.intro h2{
    font-size:1.5em;
}


.central h1{
    font-size:1.7em;
}

.central h3{
    font-size:1.5em;
}






}