@import url("https://fonts.googleapis.com/css2?family=Bentham&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bentham&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://unpkg.com/boxicons@latest/css/boxicons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Macondo+Swash+Caps&family=Outfit:wght@100..900&family=Quintessential&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Questrial&family=Varela&display=swap');

:root {

    /* --base-scale: 0.8;
    --base-size: 220;
    --scale-ratio: 1.2; /* A modular scale ratio, e.g., minor third */

    /* --1vw: calc((100vw / 100) * 1920);

    --current-percentage: calc((var(100vw / 100) / 1vw) * 100); 

    --current-scale: calc(var(--base-scale) * var(--current-percentage));

    --base-leaf-scale: calc(var(--current-scale) * 0.4); 
    --small-leaf-scale: calc(var(--current-scale) * 0.2);
    --large-leaf-scale: calc(var(--current-scale) * 0.6);   */

    --calcWidth: 100vh;
    --calcHeight: 100vw;

    --calcWidth: calc(var(--vw, 1vw) * 100);
    --calcWidth: calc(var(--vh, 1vw) * 100);



    --base-leaf-scale: 1;
    --small-leaf-scale: 0.8;
    --large-leaf-scale: 1.4;

    --leaf-div-scale-1: 0.8;
    --leaf-div-scale-2: 0.6;
    --leaf-div-scale-3: 1.0;

    /* --leaf-div-scale-1: 1.2;
    --leaf-div-scale-2: 1.0;
    --leaf-div-scale-3: 1.4; */

}

@media (min-width: 300px) {
    :root {
        --base-leaf-scale: 0.4;
        --small-leaf-scale: 0.2;
        --large-leaf-scale: 0.6;

        --leaf-div-scale-1: 1.2;
        --leaf-div-scale-2: 1.0;
        --leaf-div-scale-3: 1.4;


    }
}

@media (min-width: 768px) {
    :root {
        --base-leaf-scale: 0.4;
        --small-leaf-scale: 0.2;
        --large-leaf-scale: 0.6;

        --leaf-div-scale-1: 1.2;
        --leaf-div-scale-2: 1.0;
        --leaf-div-scale-3: 1.4;

    }
}

@media (min-width: 940px) {
    :root {
        --base-leaf-scale: 0.8;
        --small-leaf-scale: 0.4;
        --large-leaf-scale: 1.0;

        --leaf-div-scale-1: 1.3;
        --leaf-div-scale-2: 1.0;
        --leaf-div-scale-3: 1.6;

    }
}


@media (min-width: 1600px) {
    :root {
        --base-leaf-scale: 0.8;
        --small-leaf-scale: 0.6;
        --large-leaf-scale: 1.0;

        --leaf-div-scale-1: 1.2;
        --leaf-div-scale-2: 1.0;
        --leaf-div-scale-3: 1.4;

    }
}





*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    list-style-type: none;
    text-decoration: none;
}

html {
    box-sizing: inherit;
    scroll-behavior: smooth;
    height: -webkit-fill-available;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    height: -webkit-fill-available;
    color: #5e6282;
    background-color: #0b1d26;

}




body.overflow-hidden {
    overflow: hidden;
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* color: #fff; */
}



main {
    overflow: hidden;
}

a,
button {
    cursor: pointer;
    border: none;
    outline: none;
    user-select: none;
    background: none;
    box-shadow: none;
    text-decoration: none;
}



h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto", sans-serif;
}


section {
    position: absolute;
    /* background: radial-gradient(#333, #000); */
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;

    /* height: 100%; */
    height: 100%;
    width: 100vw;
    /* 100% of the viewport width */
    /* Optional: Include box-sizing for consistent padding/border behavior */
    box-sizing: border-box;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 14;

    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
}

section .set {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;



}

section .set div {
    position: absolute;
    display: block;

}

section .set1 div:nth-child(1) {
    left: 18%;
    animation: animate 15s linear infinite;
    animation-delay: -7s;
}

section .set1 div:nth-child(2) {
    left: 20%;
    animation: animate 18s linear infinite;
    animation-delay: -5s;
}

section .set1 div:nth-child(3) {
    left: 30%;
    animation: animate 20s linear infinite;
    animation-delay: 0s;
}

section .set1 div:nth-child(4) {
    left: 40%;
    animation: animate 15s linear infinite;
    animation-delay: -5s;
}

section .set1 div:nth-child(5) {
    left: 50%;
    animation: animate 12s linear infinite;
    animation-delay: -8s;
}

section .set1 div:nth-child(6) {
    left: 60%;
    animation: animate 10s linear infinite;
    animation-delay: -6s;
}

section .set1 div:nth-child(7) {
    left: 70%;
    animation: animate 14s linear infinite;
}

section .set1 div:nth-child(8) {
    left: 80%;
    animation: animate 12s linear infinite;
}

/* second set of leaves animate */


section .set2 div:nth-child(1) {
    left: 14%;
    animation: animate2 15s linear infinite;
    animation-delay: -4s;
}

section .set2 div:nth-child(2) {
    left: 20%;
    animation: animate2 20s linear infinite;
    animation-delay: -6s;
}

section .set2 div:nth-child(3) {
    left: 35%;
    animation: animate2 18s linear infinite;
    animation-delay: -6s;
}

section .set2 div:nth-child(4) {
    left: 40%;
    animation: animate2 15s linear infinite;
    animation-delay: -6s;
}

section .set2 div:nth-child(5) {
    left: 55%;
    animation: animate2 16s linear infinite;
    animation-delay: -10s;
}

section .set2 div:nth-child(6) {
    left: 60%;
    animation: animate2 12s linear infinite;
    animation-delay: -10s;
}

section .set2 div:nth-child(7) {
    left: 65%;
    animation: animate2 14s linear infinite;
    animation-delay: -6s;
}

section .set2 div:nth-child(8) {
    left: 88%;
    animation: animate2 10s linear infinite;
    animation-delay: -10s;
}



@keyframes animate {
    0% {
        opacity: 0;
        top: -20%;
        transform: translateX(20px) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    20% {
        transform: translateX(-20px) rotate(45deg);
    }

    40% {
        transform: translateX(-20px) rotate(110deg);
    }

    65% {
        transform: translateX(-20px) rotate(180deg);
        opacity: 1;

    }

    80% {
        transform: translateX(-20px) rotate(260deg);
        opacity: 0.8;

    }

    100% {
        top: 110%;
        transform: translateX(-20px) rotate(325deg);


    }
}





@keyframes animate2 {
    0% {
        opacity: 0;
        top: -20%;
        transform: translateX(20px) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    20% {
        transform: translateX(-20px) rotate(55deg);
    }

    45% {
        transform: translateX(-20px) rotate(140deg);

    }

    60% {
        transform: translateX(-20px) rotate(220deg);


    }

    75% {
        transform: translateX(-22px) rotate(310deg);
        opacity: 1;

    }

    100% {
        top: 110%;
        opacity: 0.3;
        transform: translateX(-20px) rotate(365deg);


    }
}

.set1 {
    /* transform: scale(var(--leaf-div-scale-1)); */
    top: 0px;
    /* transform-origin: top center; */
    z-index: 2;
    /* border: red solid 0px; */

}

.set1 div img {
    /* transform: scale(var(--base-leaf-scale)); */
    width: 9vw;
    width: calc(var(--vw, 1vw) * 9.6);
    height: auto;
}

.set2 {
    position: absolute;
    /* transform: scale(var(--leaf-div-scale-2)); */
    top: 0px;
    /* transform-origin: top center; */
    z-index: -1;
    /* border: rgb(18, 172, 18) solid 0px; */

}

.set2 div img {
    /* transform: scale(var(--small-leaf-scale)) rotateY(180deg); */
    /* transform: rotateY(100deg); */
    width: 5.5vw;
    width: calc(var(--vw, 1vw) * 5.8);
    height: auto;
    filter: blur(2px);
}

.set3 {
    /* transform: scale(var(--leaf-div-scale-3)); */
    top: 0px;
    transform-origin: top center;
    z-index: 3;
    /* border: rgb(131, 51, 236) solid 0px; */

}

.set3 div img {
    /* transform: scale(var(--large-leaf-scale))  rotateX(180deg); */
    width: 8vw;
    width: calc(var(--vw, 1vw) * 8);
    height: auto;
    transform: rotateX(180deg);
    /* filter: blur(2px); */
}


.next-door-title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Quintessential", serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(14px, calc(var(--vw, 1vw) * 6), 73px);
    line-height: 5.1vw;
    color: #ffffff;
    margin-top: 2.4vw;
    margin-bottom: 2.4vw;
    white-space: nowrap;
    /* border: red solid 2px; */
}





.next-door-title img {
    width: 12vw;
    width: calc(var(--vw, 1vw) * 12);
    height: auto;
    opacity: 0.7;

}

.top-image {
    position: relative;
    top: 0px;
    left: 0;
    width: 100%;
    height: auto;
    padding-left: 0;
    padding-top: 0vw;
    /* padding-right: 1rem;
    padding-bottom: .5rem; */
    /* margin-bottom: 6vw; */
    text-align: center;
    z-index: 2;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
}

.homelogonext {
    position: absolute;
    top: 4vw;
    left: 0;
    width: auto;
    height: auto;
    z-index: 16;
    opacity: 1;
}

.homelogonext img {
    display: block;
    padding-left: 10%;
    height: calc(var(--vw, 1vw) * 10);
    width: auto;
}

.child-location-div {
    position: absolute;
    top: 2%;
    right: 0%;

    min-width: 26vw;

    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.308);

    text-shadow: 3px 3px 4px rgba(0, 0, 0, 1);

    font-size: 1.6rem;
    text-align: start;
    padding-bottom: 0.2rem;
    padding-right: 12%;
    padding-left: 0%;
    z-index: 2;
}

.next-door-copy-section {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
     width: 90%;
    z-index: 24;
}

.next-door-frame {

    width: 90%;
    /* border: 2px solid #333; */
    /* Defines the frame: 2px solid line in dark gray */
    border-radius: 15px;
    /* Rounds all four corners with a 15px radius */
    padding: 3vw;
    /* Adds space between the content and the border */
    /* background-color: #b4b3b3; */
    /* Sets a light gray background color */
    text-align: center;
    /* Centers the text within the div */
    font-family: Arial, sans-serif;
    /* Sets a common font */
    color: black;

    background-image: url('../images/nextdoor/revmur033.jpg');

    border: 3px solid rgb(99, 97, 197);
}

.next-door-copy {
    color: black;
    text-align: left;
    font-size: clamp(14px, 1.8vw, 68px);
    /* font-family: "Varela", sans-serif; */
    font-family: Helvetica, Arial, sans-serif;
    /* font-optical-sizing: auto; */
    font-weight: 500;
    font-style: normal;

}

.next-door-copy p {
    color: black;

    font-size: clamp(14px, 1.8vw, 68px);
    /* font-family: "Varela", sans-serif; */
    font-family: Helvetica, Arial, sans-serif;
    /* font-optical-sizing: auto; */
    font-weight: 500;
    font-style: normal;
    margin-bottom: 1.3em;

}

.chapter-bible {
    margin-bottom: 0.3em !important;
    font-weight: 900;

}

.next-door-copy .chapter-tag {
    width: 100%;
    font-weight: 100%;
    font-size: larger;
    text-align: center;
    align-self: center;
    color: rgb(117, 55, 18);
}

.next-door-copy .scripture-quote {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center !important;
    border: #5e6282 solid 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.next-door-copy .scripture-quote .scripture-block {
    width: 60%;
    border: red solid 0px;
    text-align: left;
}

.next-door-copy .copyright-text {
    font-size: clamp(12px, 1.4vw, 26px);
}





.nunito-whatever {
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.varela-regular {
    font-family: "Varela", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.questrial-regular {
    font-family: "Questrial", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.footnote-copy {
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: content-box;
  margin-bottom: 30px;
  color: #ced3f8;
  font-size: smaller;
}

.about-return-div {
  margin-top: clamp(20px, calc(var(--vw, 1vw) * 3), 40px);
  display: flex;
  color: #5e6282;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.content-action {
  font-size: clamp(12px, 2vw, 32px);
  color: #fbd784;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  transition: all 0.4s ease-in-out;
}

.link-none {
  border: none;
  outline: none;
  user-select: none;
  background: none;
  box-shadow: none;
  text-decoration: none;
  color: #a7aee4;
}