.transition-zoom {
  opacity: 1;
  transition: 400ms;
}


html.is-animating .transition-zoom {
  opacity: 0;
  transform: translateY(20px);
}

.vast-shadow-regular {
  font-family: "Vast Shadow", serif;
  font-weight: 400;
  font-style: normal;
}

h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
}

p {
    font-size: 30px;
    font-weight: bolder;
    align-self: flex-end;
    text-align: center;
    color: black;
    font-weight: bolder;
}

body {
  background-image: url('2026 Shutterstock.9752533.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; 
  min-height: 100vh;           
  margin: 0;                    
  color: white;
  position: relative;
}

.nav-list a:hover {
  color: black;
  border-radius: 5px;
}


.nav-list a.active {
  font-weight: bold;
  border-bottom: 2px solid white;
}

.nav-list a.button {
  background-color: black;
  color: black;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
}

.nav-list {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  padding: 2em;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 1;
  list-style: none;
  color: black;
  transition: all 0.3s ease;
  gap: 0px;
  background-color: lavender;
}



span {
  
  display: inline-block; 
 
  transition: transform 0.2s ease-in-out; 
  padding: 0 5px; 
}

span:hover {

  transform: scale(1.3); 
}


.nav-links {
  
  transition: opacity 0.5s ease-out; 
}

.nav-links.fade-out {

  opacity: 0;
}

.hero{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.hero h1{
  font-size: 10vw;
  line-height: 90%;
}

.content {
  display: flex;
  justify-content: center; 
  align-items: center;  
  height: 65vh;     
  margin-bottom: 0px;
  padding: 0;   
}

.footer-contact {
  position: absolute; /* 👈 Lifts the footer so it floats over the background */
  bottom: 0;          /* 👈 Pins it to the very bottom */
  left: 0;
  width: 100%;
  background-color: rgba(230, 230, 250, 0.8); /* Lavender with 80% transparency */
  color: black;
  text-align: center;
  padding: 1.5rem 0;
  z-index: 10;        /* 👈 Ensures it stays above the background image */
}

.page-transition{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform 0.6s ease;
  z-index:999;
}

.page-transition.active{
  transform:scaleY(1);
  transform-origin:top;
}