/*overall parent div*/
.nfd-into-parent{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    /*display:none;*/
}

.nfd-bgd-br::before, .nfd-bgd-clear {
    background-attachment: fixed; /* Keeps the background fixed while the user scrolls */
}
/* Base styles for the blurred background */
.nfd-bgd-br {
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    max-height:100vh;
    max-width: 100%;
    transition: opacity 0.5s ease; /* Smooth fade-out transition */
    z-index:1;
}

.nfd-bgd-br::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    max-height:100vh;
    background-image: url('https://nofacedivination.com/wp-content/plugins/Cartica-Home/images/nfd-background-1.jpg');
    background-size: 200%;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(10px); /* Initial blur effect */
    z-index: -1;
    transition: filter 0.5s ease; /* Smooth blur removal */
}

.nfd-bgd-clear {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    max-height:100vh;
    background-image: url('https://nofacedivination.com/wp-content/plugins/Cartica-Home/images/nfd-background-1.jpg');
    background-size: 200%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0; /* Unblurred background is underneath */
    max-width: 100%;
    margin: unset;
    transition: background-size 0.5s ease, background-position 0.5s ease, opacity 1s ease; 
    opacity: 1; /* Start at full opacity */
    /*transition: opacity 5s ease-in-out;*/

}

.nfd-into-name, .scroll-icon {
    position: relative;
    z-index: 1; /* Ensures the text is above the backgrounds */
    color: #fff; /* Adjust text color as necessary */
}




.scroll-downs {
position: absolute;
top: 50%;
right: 0;
bottom: 50%;
left: 0;
margin: auto;
width: 34px;
height: 55px;
z-index: 6;
}
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid #fff;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #fff;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { transform: translateY(10px); opacity: 0; }
  10% { transform: translateY(10px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0;}
}