.full-body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
.emergency-container {
  position: relative;
  width: 100%; /* Occupy the entire width */
  height: 100vh; /* Occupy the full viewport height */
  overflow: hidden;
 
}

.emergency-container img {
  width: 100%; /* Occupy the entire width of the container */
  height: 100%; /* Occupy the entire height of the container */
  object-fit: cover; /* Maintain the image's aspect ratio while covering the container */
  object-position:bottom left;
  position:absolute;
  left:0;
  bottom:0; /* Align the bottom edge with the bottom of the container */
}

.emergency-centered-image {
  width: 25%;
  padding-top: calc(25% * (444 / 700)); /* Maintain the aspect ratio 700x444 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.emergency-centered-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}







 
 .header-bg{
  position:relative;
  background-color: #222E50;
  width: 100%;
  text-align: center;
  padding: 15px 0;  
 }

 #disable-hover{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10; /* This value may need to be adjusted */
    cursor: none;
  
 }

 .responsive-image{
  width:100%;
  height:auto;
  object-fit: contain;
 }

 .header-bg-text{
  color: #FFEC51;
  font-family: "paralucent-text", sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.7em;
    padding:0;
    margin:0;
 }
 
 /* STYLES FOR THE MAPSTYLES PAGE */
 .main-containerMap {
  display: flex;
  flex-wrap: wrap;
}

.containerMap {
  display: flex;
  flex-direction: column; /* To stack box and content vertically */
  align-items: flex-start; /* Aligns children to the left */
  margin: 10px;
  width: calc(200px + 20px); 
}

.boxMap {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: blue;
  position: relative;;
}

.cross-out {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
}

.contentMap{

  font-family: "paralucent-text", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  text-align: left;
  color: black;
  margin-top: 10px;
  margin-left: 10px; /

}

#map{
 /* border: 3px solid #222E50;*/
}
 
 /* Style for the about section */



.floating-image {
  position:absolute;
  padding-top: calc(40% * (510 / 1000)); 
  top: 3%;
  left: 50%;
  width:20%;
  height: auto;
  transform: translateX(-50%);
  z-index: 1000;  
}

@media (max-width: 992px) {
  .floating-image {
    width:30%;
  }
}

/* Adjust section height for small screens */
@media (max-width: 768px) {
  .floating-image {
    width:40%;
   
  }
}

.floating-image img#hikeLogo{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:auto;
}

.instagram-embed-wrapper {
  position: relative;
  width: 100%;
  max-height: 100%; /* Set the desired maximum height */
  overflow: hidden;
}

.background-white{
  background-color: #FFFEF6;
}

.background-pink{
  background-color: #FAC8CD;
}

#expect .row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.moose-img{
  width:25% !important;
  height:auto;
  transform: scale(0.9) !important;
}

#hike-description{
  padding-top:5rem;
  padding-bottom:3rem;
}




.instagram-embed-wrapper > .instagram-media {
  
  margin-bottom: -153px !important;
}


#header-section{
  width:100%;
  height:10%;
  background-color:#FFEC51;
}

 #about {
    position: relative;
    background-color: #f5f5f5; /* Set the background color as needed */
    overflow: hidden;
  }

  #rewards{
    background-color: #C6D76D;
  }
  .instagram-media {
    width: 100% !important;
  }

  

  .footer-styles{
    background-color: #222E50;
    margin-bottom:0;
  }

  #instagram {
    background-color: #C6D76D;
  }

  #logo-image{
    width:60px;
    height: 60px;
  }
  

  .header-section{
    height:0;
    padding-top: calc(20% * (510 / 1000));
  }

  @media (max-width: 992px) {
    .header-section {
      
      height:0;
      padding-top: calc(30% * (510 / 1000));
    }
  }
  
  /* Adjust section height for small screens */
  @media (max-width: 768px) {
    .header-section {
      height:0;
      padding-top: calc(40% * (510 / 1000));
    }
  }
  
  /* Aspect ratio container styles */
  .aspect-ratio-container {
    position: relative;
    width: 100%;
    height: 100%;
    /*padding-top: 60%;  10 / 16 * 100% (16:10 aspect ratio) */
    overflow: hidden;
  }

  .pb-0 {
    padding-bottom: 0;
  }
  
  /* Image styles within the aspect ratio container */
  .aspect-ratio-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
  }

  /* Styles for the headline section */
#headline {
    background-color: #f5f5f5; /* Set the background color as needed */
  }

  #product{
    background-color: #FAC8CD;
    overflow: hidden;
    max-height:540px;
    
  }

  #merchandise{
    background-color: #f5f5f5;
  
  }

  #hike{
    background-color:#FAC8CD;
  }
 
  #centered-image {
    margin-top: 0px; /* Adjust the top margin as needed */
    margin-bottom: -90px; /* Extend the image beyond the bottom by the same amount as top margin */
    padding: 0px 0; /* Adjust the padding to control the section's height */
    position: relative;
    background-color: #FFEC51;
  }
  
  /* Style the centered image */
  .centered-image {
    display: block;
    margin: 0 auto; /* Center the image horizontally */
    max-width: 100%;
    height: auto;
    position: relative;   
    z-index: 5; /* Place the image above the section's background */
  }
  
  /* Extend the image beyond the bottom of the section */
  .centered-image::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px; /* Same as the top margin value */
     /* Set background color to match the section background */
    z-index: -1; /* Place the overlay below the image */
  }

  .date{
    position:relative;
    padding-top: 3rem;
  }

  @media (max-width: 768px) {
    .date {
      padding-bottom:3rem;
    }
  }
  
  @media (min-width:769px) and (max-width: 992px) {
    .date {
      padding-bottom:3rem;
    }
  }
  
  @media (min-width:993px){
    .date{
      padding-bottom:3rem;
    }
  }

  .trail-logo-image{
    max-width: 120px;
    z-index: 100;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }

  @media (max-width: 768px) {
    .trail-logo-image {
      width:15%;
    }
  }
  
  @media (min-width:769px) and (max-width: 992px) {
    .trail-logo-image {
      width: 15%;
    }
  }
  
  @media (min-width:993px){
    .trail-logo_image{
      width: 15%;
    }
  }
  
  /* Styles for the headline text */
  .headline-text {
    font-family: "cooper-black-std", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 120%;
    padding-bottom:20px;
    margin-bottom: 0px;
  }

  .headline-text-plus-legal{

    font-family: "cooper-black-std", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 120%;
    padding-bottom:5px;
    margin-bottom: 0px;
  
  }

  .headline-text-lg {

    font-family: "cooper-black-std", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 42px;
    line-height: 100%;
    padding-top:0;
    margin-top:0;
    padding-bottom:1rem;
  }

  

  .headline-text-default{

    color: #222E50;
  }

  .headline-text-white{
    color:#f5f5f5;
  }

  .link-image {   
    border-radius: 5px;
  }

  .link-text {

    font-family: "paralucent-text", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    margin-bottom: 5px;
  }

  .address-text {

    font-family: "paralucent-text", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    margin-bottom: 5px;
  }


  .merch-price{
    font-family: "paralucent-text", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
  }

  /* Styles for the "Learn More" button */
  .default-btn {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: "paralucent-text", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
  

    background-color: #FFEC51;
    color: #222E50;
    border: 2px solid #222E50;
    text-decoration: none;
 
    border-radius: 0; /* Set border radius to 0 to remove rounded corners */
  }


.default-btn:hover {
  background-color: #FAC8CD;
}

  .merch-info{
    height: 35px;
    margin-top: 15px;
  }

  .buy-now-btn {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 10px 20px;
    margin: 0;
    background-color: #C6D76D;
    color: #222E50;
    border: 2px solid #222E50;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0;
  }

  .buy-now-btn:hover{
    background-color: #FAC8CD;
  }
  
  .learn-more-btn:hover {
    background-color: #222E50;
    color: #FFEC51;
  }

  .social-icons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:20px;
    padding-bottom: 33px;
  }

  .social-icons .social-link{
    height: 20px;
    display:inline-block;
  }

  .social-link img{
    height:100%;
    width: auto;
  }

  
  /* Add this to ensure the aspect ratio of the small image is maintained */
  

  .hidden{
    display: none;
  }
  

  /* CODE TO HANDLE VIMEO VIDEO PLAYER*/

  

  .vimeo-section{
    position:relative;
    overflow:hidden;
    background-color: #222E50;
    height: calc(100% - 1px);
  }

  .vimeo-container{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow: hidden;
    
  }
  
  #vimeo-player{
    position:absolute;
    top:0;
    left:0;
    width:100vw;
    height:100%;

  
    box-sizing: border-box;
  }

  .custom-play-button{
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 10; /* Ensure buttons are above the video */

  }

  .play-button{
    background:url('/img/playButtonDefault.png') no-repeat;
    background-size:cover;
    width: 50px;
    height:50px;
    border:none;
    cursor:pointer;
    transition: opacity 0.3s;
  }

  .play-button:hover{
    background:url('/img/playButtonHover.png') no-repeat;
    background-size:cover;
  }

  .play-button:active{
    background:url('/img/playButtonActive.png') no-repeat;
    background-size: cover;
  }

  .pause-button{
    background:url('/img/pauseButtonDefault.png') no-repeat;
    background-size:cover;
    display: none;
    width:50px;
    height:50px;
    border:none;
    cursor:pointer;
    transition: opacity 0.3s;
  }

  .pause-button:hover{
    background:url('/img/pauseButtonHover.png') no-repeat;
    background-size:cover;
  }

  .pause-button:active{
    background:url('/img/pauseButtonActive.png') no-repeat;
    background-size: cover;
  }

  .text-animation {
    position: relative; /* Add this to create a stacking context */
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: #C6D76D;
    width: 100vw;
  }
  
  .text-animation::before {
    content: ''; /* Create a pseudo-element for the border */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #222E50;
    z-index: 1; /* Place the border above the content */
  }
  
  .text-animation::after {
    content: ''; /* Create a pseudo-element for the border */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #222E50;
    z-index: 1; /* Place the border above the content */
  }

.text-container{
  margin:0;
  padding:0;
  display:flex;
  overflow:hidden;
}

.animation-content{
  white-space: nowrap;

  line-height:1.2;
}

.body-copy-text{ 
  font-family: "paralucent-text", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  line-height: 140%;
  color:#222E50;
}

@media (min-width:769px) and (max-width: 992px) {
  .body-copy-text {
    font-size:14px;
  }
}

/*
@media (max-width: 768px) {
  .body-copy-text {
    font-size: 16px;
  }
}

@media (min-width:769px) and (max-width: 992px) {
  .body-copy-text {
    font-size:14px;
  }
}

@media (min-width:993px){
  .body-copy-text{
    font-size:16px;
  }
}
*/

.merch-copy-text{ 
  font-family: "paralucent-text", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  line-height: 140%;
  color:#222E50;
}

.body-copy-text-legal{ 
  font-family: "paralucent-text", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 10px;
  line-height: 140%;
  color:#222E50;
}



.position-relative {
  position: relative;
}

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

#burger-image {
  display: block;
  width: 100%; /* Assuming you want it to take up full width of its container */
}

.body-copy-text-default{
  color:#222E50;
}

.body-copy-text-white{
  color:#f5f5f5;
}

.body-copy-text-justify{
  text-align: justify;
  text-align-last: left;
}

.body-copy-text-centered{
  padding-top:10px;
  text-align: center; 
  padding-bottom:0;
  margin:0;
}

.body-copy-text-sm{ 
  font-family: "paralucent-text", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
}

.image-hover {
  transform-origin: 20% 40%; /* Adjust the anchor point offset */
  transition: transform 1s;
}

.image-container {
  overflow: hidden;
}

.burger-parent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;  /* So that other elements remain in a vertical line */
}

.burger-container{
  position: relative; /* Set the position to relative */
  display: inline-block;
  transition: transform 1s, top 1s; /* Apply transition for both transform and top properties */
  transform-origin: 50% 100%; 
  overflow: hidden;
}  

@media (min-width: 768px) {
  .burger-container {
    top:-30px;
    width:70%;
  }
}

@media (min-width:769px) and (max-width: 992px) {
  .burger-container {
    width:65%;
    top:-30px;
  }
}

@media (min-width:993px){
  .burger-container{
    top: -30px; /* Adjust this value to your desired starting position */
    width:40%;
  }
}




#burger-image {
  position:relative;
  z-index: 6;

  display: block;
  width: 100%; /* Assuming you want it to take the full width of .burger-container */
}

.overlay-gif {
  z-index: 5;
  position: absolute;
  width: 25%; /* Set width as a percentage of #burger-image */
  height: auto; /* Maintain aspect ratio */
  top: 0%;  /* Adjust these to position the overlay as you like */
  left: 45%;
  
}

.overlay-terrain{
  width: 10%;
  height:auto;
  position:absolute;
  top: 1%;
  left: 32%
}

.trail-map-container{
  position:relative;
}