@font-face {
    font-family: "SultanRuqahLongo-Bold";
    src: url("../fonts/Sultan_Ruqah_Longo/alfont_com_Sultan-Ruqah-Longo-Bold.ttf");
}

@font-face {
    font-family: "Spicy Rice";
    src: url("../fonts/Spicy_Rice_regular/SpicyRice-Regular.ttf");
}

@font-face {
    font-family: "Janna LT Regular";
    src: url("../fonts/Janna_regular/Janna\ LT\ Regular.ttf");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.banner {
    height: auto;
    background-repeat: no-repeat;
    background-position: center center;
}

.content-wrapper {
    position: absolute;
    top: 0;
    display: flex;
    height: auto;
    width: 100%;
    z-index: 10;
    flex-direction: column;
    justify-content: space-between;
}

.Banner-1 {
    backgroundOLD-image: url(../images/our-story/banner/Banner-1.png);
    background-image: url(../images/our-story/banner/Main_Banner_1_sm2.png);
    background-size: cover;
    /* height: 100vh; */
    width: 100%;
    aspect-ratio: 8001/4337;
    max-height: 800px;
    background-position: bottom;
    z-index:2;
    position:relative;
}

.heavenfull-story {
    color: #fff;
    opacity: 0.65;
    font-weight: 700;
    font-size: 3vw;
    letter-spacing: 7px;
    word-spacing: 0.3rem;
}

#once-upon-a-stroopwafle {
    font-size: 4vw;
    font-family: "Spicy Rice";
    top: 32px;
    word-spacing: 20px;
    color: #ff9301;
    margin-top: 3%;
}

.read-full-story-btn {
    margin-top: 10%;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vh 2vw;
    width: 13vw;
    font-size: 1vw;
    color: #fff;
    background-color: #c2e4ee;
}

.read-full-story-btn:hover {
    margin-top: 10%;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vh 2vw;
    width: 13vw;
    font-size: 1vw;
    color: #fff;
    background-color: #bfeaf7;
}

.join-our-community {
    background-image: url("../images/landing/Banner/join-our-community-banner-background.png");
    background-size: cover;
    max-height: 100%;
    width: 100%;
    margin-top: 5%;
}

.join-the-community-heading {
    padding-top: 7%;
    font-size: 4rem;
    padding-bottom: 3%;
    font-family: "Spicy Rice";
    color: #fff;
}

.sign-up-now-btn,
.sign-up-now-btn:hover {
    border-radius: 50px;
    width: 30%;
    font-weight: 500;
    color: #fff;
    font-size: 1vw;
    background-color: #95d4ff;
}

input[type="email"] {
    border: 3px solid #95d4ff;
    border-radius: 50px;
    height: 70px;
    background-color: transparent;
}

input[type="email"]:focus {
    border: 3px solid #95d4ff;
    border-radius: 50px;
    height: 70px;
    background-color: transparent;
}

input[type="email"]::placeholder {
    color: #fff;
    font-weight: 500;
    font-size: 1vw;
}

.input-group {
    width: 75% !important;
}

.community-footer-container {
    padding: 50px 0px 20px 0px;
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.all-rights-reserved {
    font-size: 1.5rem;
    color: #fff;
}

  .our_story_image {
    width: 100%;
    margin-top: -7%;
  }

  
  .once_upon_text_img {
    height: auto;
    width: 65%;
  }

@media only screen and (max-width: 575px) {

      .once_upon_text_img{
        height: auto;
        width: 80%;
      }

    .our_story_image {
        transform: translate(0%, 0%);
      }


    .Banner-1 {
        /*height: 90vh;*/
    }

    .heavenfull-story {
        font-size: 6vw;
        letter-spacing: 2px;
        word-spacing: 0rem;
        margin-top: 10%;
    }

    #once-upon-a-stroopwafle {
        font-size: 6.4vw;
    }

    .read-full-story-btn,
    .read-full-story-btn:hover {
        margin-top: 10vh;
        width: 45vw;
        height: auto;
        padding: 10px 7px;
        font-size: 3.2vw;
    }

    .creation_of_heavenfull_banner {
        margin-top: -4vh;
        /* aspect-ratio: 4/4; */
        height: auto;
    }

    .creation_of_heavenfull_para {
        position: absolute;
        transform: translate(-10%, 80%);
        width: 43vw;
        right: 0;
        font-size: 2.6vw;
        text-align: right;
    }

    .history_of_heavenfull_banner {
        background-size: cover;
        height: 100vh;
    }

    .history_of_heavenfull_para_1 {
        position: absolute;
        transform: translate(-72%, 18vh);
        width: 56vw;
        right: 0;
        text-align: left;
        font-size: 15px;
    }

    .history_of_heavenfull_para_2 {
        position: absolute;
        transform: translate(-2%, 82vh);
        width: 97vw;
        right: 0;
        text-align: center;
        font-size: 2.7vw;
    }

    .man_with_cart_banner {
        margin-top: -4.5vh;
        /* aspect-ratio: 13/7; */
        height: auto;
    }

    .sky_banner {
        margin-top: -5vh;
        width: 100%;
        /* aspect-ratio: 14/12; */
        z-index: -1;
        position: relative;
        height: auto;
    }

    .sky_banner_para {
        position: absolute;
        transform: translate(-10%, 110%);
        width: 53vw;
        right: 0;
        font-weight: bold;
        font-size: 2.5vw;
        text-align: right;
    }

    .farm_banner {
        margin-top: -10vh;
        width: 100%;
        /* aspect-ratio: 14/12; */
        z-index: -1;
        position: relative;
        height: auto;
    }

    .gallery_banner {
        margin-top: -30%;
        width: 100%;
        /* aspect-ratio: 9/3; */
        z-index: 1;
        position: relative;
        height: auto;
    }

    .taste_of_heaven_text_1 {
        width: 75vw;
        font-size: 3vw;
        text-align: center;
        font-weight: 600;
        margin-top: 2vh;
        word-spacing: 3px;
    }

    .sign-up-now-btn,
    .sign-up-now-btn:hover {
        border-radius: 50px;
        width: 30vw;
        font-size: 3vw;
        font-weight: 500;
        height: 6vh;
        color: #fff;
    }

    .input-group {
        width: 82% !important;
    }

    input[type="email"] {
        height: 6vh;
    }

    input[type="email"]:focus {
        height: 6vh;
    }

    input[type="email"]::placeholder {
        font-size: 3vw;
    }

    .all-rights-reserved {
        font-size: 3vw;
    }

    .join-our-community {
        width: 100%;
        height: 100vh;
        background-position: center center;
    }

    .join-the-community-heading {
        padding-top: 10vh;
        font-size: 6vw;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {

    .our_story_image {
        transform: translate(0%, 0%);
      }
    
      .once_upon_text_img{
        height: auto;
        width: 80%;
      }

    .Banner-1 {
        /*height: 95vh;*/
    }

    .heavenfull-story {
        font-size: 6vw;
        letter-spacing: 2px;
        word-spacing: 0rem;
        margin-top: 10%;
    }

    #once-upon-a-stroopwafle {
        font-size: 6.4vw;
    }

    .read-full-story-btn,
    .read-full-story-btn:hover {
        margin-top: 10vh;
        width: 45vw;
        height: auto;
        padding: 10px 7px;
        font-size: 3.2vw;
    }

    .creation_of_heavenfull_banner {
        margin-top: -4vh;
        /* aspect-ratio: 4/4; */
        height: auto;
    }

    .creation_of_heavenfull_para {
        position: absolute;
        transform: translate(-10%, 80%);
        width: 43vw;
        right: 0;
        font-size: 2.6vw;
        text-align: right;
    }

    .history_of_heavenfull_banner {
        background-size: cover;
        height: 100vh;
    }

    .history_of_heavenfull_para_1 {
        position: absolute;
        transform: translate(-72%, 18vh);
        width: 56vw;
        right: 0;
        text-align: left;
        font-size: 15px;
    }

    .history_of_heavenfull_para_2 {
        position: absolute;
        transform: translate(-2%, 82vh);
        width: 97vw;
        right: 0;
        text-align: center;
        font-size: 2.7vw;
    }

    .man_with_cart_banner {
        margin-top: -4.5vh;
        /* aspect-ratio: 13/7; */
        height: auto;
    }

    .sky_banner {
        margin-top: -5vh;
        width: 100%;
        /* aspect-ratio: 14/12; */
        z-index: -1;
        position: relative;
        height: auto;
    }

    .sky_banner_para {
        position: absolute;
        transform: translate(-10%, 110%);
        width: 53vw;
        right: 0;
        font-weight: bold;
        font-size: 2.5vw;
        text-align: right;
    }

    .farm_banner {
        margin-top: -10vh;
        width: 100%;
        /* aspect-ratio: 14/12; */
        z-index: -1;
        position: relative;
        height: auto;
    }

    .gallery_banner {
        margin-top: -30%;
        width: 100%;
        /* aspect-ratio: 9/3; */
        z-index: 1;
        position: relative;
        height: auto;
    }

    .taste_of_heaven_text_1 {
        width: 75vw;
        font-size: 3vw;
        text-align: center;
        font-weight: 600;
        margin-top: 2vh;
        word-spacing: 3px;
    }

    .sign-up-now-btn,
    .sign-up-now-btn:hover {
        border-radius: 50px;
        width: 30vw;
        font-size: 3vw;
        font-weight: 500;
        height: 6vh;
        color: #fff;
    }

    .input-group {
        width: 82% !important;
    }

    input[type="email"] {
        height: 6vh;
    }

    input[type="email"]:focus {
        height: 6vh;
    }

    input[type="email"]::placeholder {
        font-size: 3vw;
    }

    .all-rights-reserved {
        font-size: 3vw;
    }

    .join-our-community {
        width: 100%;
        height: 100vh;
        background-position: center center;
    }

    .join-the-community-heading {
        padding-top: 10vh;
        font-size: 6vw;
    }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

    .our_story_image {
        transform: translate(0%, 0%);
      }

      .once_upon_text_img{
        height: auto;
        width: 80%;
      }

    .Banner-1 {
        /*height: 95vh;*/
    }

    .heavenfull-story {
        font-size: 6vw;
        letter-spacing: 2px;
        word-spacing: 0rem;
        margin-top: 10%;
    }

    #once-upon-a-stroopwafle {
        font-size: 6.4vw;
    }

    .join-our-community {
        width: 100%;
        height: 100vh;
        background-position: center center;
      }
    
      .sign-up-now-btn,
      .sign-up-now-btn:hover {
        font-size: 1.8vw;
      }
    
      input[type="email"] {
        height: 7vh;
      }
    
      input[type="email"]:focus {
        height: 7vh;
      }
    
      input[type="email"]::placeholder {
        font-size: 1.8vw;
      }
    
      .all-rights-reserved {
        font-size: 2.5vw;
        color: #fff;
      }
    
      .join-the-community-heading {
        padding-top: 15%;
        font-size: 3rem;
      }
}

@media only screen and (min-width: 992px) and (max-width: 1280px) {

    .our_story_image {
        transform: translate(0%, 0%);
      }

      .once_upon_text_img {
        height: auto;
        width: 75%;
    }

    .Banner-1 {
    /*height: 95vh;*/
    }

    
    .heavenfull-story {
        font-size: 4.55vw;
        word-spacing: 5px;
        margin-top: 10%;

      }
    
      #once-upon-a-stroopwafle {
        font-size: 5vw;
      }


    .join-our-community {
        width: 100%;
        height: 100vh;
        background-position: center center;
      }
    
      .sign-up-now-btn,
      .sign-up-now-btn:hover {
        font-size: 1.8vw;
      }
    
      input[type="email"] {
        height: 7vh;
      }
    
      input[type="email"]:focus {
        height: 7vh;
      }
    
      input[type="email"]::placeholder {
        font-size: 1.8vw;
      }
    
      .all-rights-reserved {
        font-size: 2vw;
        color: #fff;
      }
    
      .join-our-community {
        width: 100%;
        height: 100vh;
        background-position: center center;
      }
    
      .join-the-community-heading {
        padding-top: 8%;
        font-size: 3rem;
      }
}