@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");
  }

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


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

.hero_banner{
    height: auto;
    width: 100%;
    /* aspect-ratio: 45/20; */
}

.banner-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    color: #fff;
}
.banner-content img {
    height: auto;
    width: 50vw;
    /* aspect-ratio: 70/35; */
    display: inline-block;
    transform: translate(15%, -10%);
}

.banner-content h2,
.banner-content h3 {
    font-family: "Spicy Rice";
    font-size: 3.5vw;
    letter-spacing: 5px;
    word-spacing: 5px;
    margin-bottom: 10px;
    transform: translate(-5%, -25%);
    width: 50vw;
}

.sams_heading_color{
    color: #e7e581;
}

.costco_heading_color{
    color: #b06424;
}

.gbics_heading_color{
    color: #018045;
}

.banner-content h3 {
    font-size: 2vw;
}

.color_bg_pink,
.color_bg_green,
.color_bg_blue,
.color_bg_purple {
    heighOLDt: auto;
    widthOLD: 100%;
    margin-topOLD: -15%;
    /* aspect-ratio: 20/18; */
    /* display: flex; */
    /* flex-direction: column; */
    justify-contentOLD: space-between;
    align-itemsOLD: center;
    width: 100%;
    /*padding-bottom: 220px; */
    margin-top: -180px;
    padding-top: 220px;
}

.color_bg_pink {
    background-color: #f5b4cf;
}

.color_bg_green {
    background-color: #018045;
}

.color_bg_blue{
    background-color: #9ac0c6;
}

.color_bg_purple{
    background-color: #6b397e;
}

.product_container {
    widthOLD: 90%;
    transformOLD: translate(2%, 45%);
    display: flex;
    justify-content: center;
}

.main_product_image {
    widthOLD: 40vw;
    width:100%;
    height: auto;
    /* aspect-ratio: 2/2; */
}

.slide_arrow {
    width: 8%;
    min-width: 30px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.slide_img {
    width: 62%;
    padding: 3% 0%;
}

.banner_text,
.banner_text_2 {
    width: 90%;
    height: auto;
    /* aspect-ratio: 6/5; */
    margin-left: -10%;
}

.banner_text_2 {
    /* aspect-ratio: 9/10; */
}

.reviews {
    padding: 5% 0%;
    width: 80%;
    margin-left: -10%;
}

.callouts {
    width: 35%;
    height: auto;
    margin-left: -10%;
    /* aspect-ratio: 17/9; */
}

.product_bottom_wave{
    width: 100%;
    margin-top: 15rem;
    height: auto;
}

.product_bottom_wave_rvics {
  width: 100%;
  height: 55vh;
  margin-top: 15rem;
}
.gallery_banner,
.quote_banner{
    width: 100%;
}

.review_container{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.customer_review_img,
.customer_review_img_rvics,
.customer_review_img_costco{
    width: 85%;
    max-width:800px;
    margin: 5% 0% 0% 0%;
}

.customer_review_img_rvics{
    margin: 3% 0% 0% 0%;
}

.customer_review_img_costco{
    margin: -3% 0% 0% 0%;
}

.join-our-community,
.join-our-community-gbics,
.join-our-community-costco-swics,
.join-our-community-sams-club {
    background-imageOLD: url("../images/products-page/RVICS/Banner/Banner6_sm1.png");
    background-size: cover;
    background-position: top;
}

.join-our-community {
    background:#f5b4cf;
}

.join-our-community-gbics {
    background-imageOLD: url("../images/products-page/GBICS/Banner/Banner\ 5.png");
    background:#a3bf6c;
}

.join-our-community-costco-swics {
    background-imageOLD: url("../images/products-page/Costco-SWICS/Banner/Banner\ 6.png");
    background:#9ac1c9;
}

.join-our-community-sams-club {
    background-image: url("../images/products-page/Sams-Club-SWICS/Banner/Banner\ 5.png");
    margin-top: -25vw;
}

.join-our-community-brownie-skillet {
    background-image: url("../images/products-page/BrownieSkillet/BottomFooterBannerBG.png");
    margin-top: -25vw;
    background-size: cover;
}

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

    .sign-up-now-btn,
    .sign-up-now-btn:hover,
    .sign-up-now-btn-gbics,
    .sign-up-now-btn-gbics:hover,
    .sign-up-now-btn-costco-swics,
    .sign-up-now-btn-costco-swics:hover,
    .sign-up-now-btn-sams-club,
    .sign-up-now-btn-sams-club:hover {
        border-radius: 50px;
        width: 30vw;
        color: #fff;
        background-color: #faa7d0;
    }
    
    .form-control-gbics,
    .form-control-brownie-skillet,
    .form-control-costco-swics,
    .form-control-sams-club,
    .form-control-rvics,
    .form-control-rvics:focus,
    .form-control-gbics:focus,
    .form-control-brownie-skillet:focus,
    .form-control-costco-swics:focus,
    .form-control-sams-club:focus {
        background-color: transparent;
        border: 3px solid #faa7d0;
        border-radius: 50px;
        height: 6vh;
    }
    
    .form-control-rvics::placeholder,
    .form-control-gbics::placeholder,
    .form-control-costco-swics::placeholder,
    .form-control-sams-club::placeholder
    .form-control-brownie-skillet::placeholder {
        color: #fff;

    }

@media only screen and (max-width: 575px) {
    .sign-up-now-btn,
    .sign-up-now-btn:hover,
    .sign-up-now-btn-gbics,
    .sign-up-now-btn-gbics:hover,
    .sign-up-now-btn-costco-swics,
    .sign-up-now-btn-costco-swics:hover,
    .sign-up-now-btn-sams-club,
    .sign-up-now-btn-sams-club:hover {
        border-radius: 50px;
        width: 30vw;
        font-size: 3vw;
        font-weight: 500;
        height: 6vh;
        color: #fff;
        background-color: #faa7d0;
    }
    
    .form-control-gbics,
    .form-control-brownie-skillet,
    .form-control-costco-swics,
    .form-control-sams-club,
    .form-control-rvics,
    .form-control-brownie-skillet:focus,
    .form-control-rvics:focus,
    .form-control-gbics:focus,
    .form-control-costco-swics:focus,
    .form-control-sams-club:focus {
        border: 3px solid #faa7d0;
        border-radius: 50px;
        height: 6vh;
        background-color: transparent;
    }
    
    .form-control-rvics::placeholder,
    .form-control-gbics::placeholder,
    .form-control-costco-swics::placeholder,
    .form-control-sams-club::placeholder
    .form-control-brownie-skillet::placeholder {
        color: #fff;
        font-weight: 500;
        font-size: 3vw;
    }

}

@media only screen and (min-width: 1279px) {
    
    .sign-up-now-btn,
    .sign-up-now-btn:hover,
    .sign-up-now-btn-gbics,
    .sign-up-now-btn-gbics:hover,
    .sign-up-now-btn-costco-swics,
    .sign-up-now-btn-costco-swics:hover,
    .sign-up-now-btn-sams-club,
    .sign-up-now-btn-sams-club:hover, {
        border-radius: 50px;
        width: 30%;
        font-weight: 500;
        font-size: 1vw;
        color: #fff;
        background-color: #faa7d0;
    }
    
    .form-control-rvics,
    .form-control-brownie-skillet,
    .form-control-gbics,
    .form-control-costco-swics,
    .form-control-sams-club,
    .form-control-rvics,
    .form-control-rvics:focus,
    .form-control-brownie-skillet:focus,
    .form-control-gbics:focus,
    .form-control-costco-swics:focus,
    .form-control-sams-club:focus {
        border: 3px solid #faa7d0;
        border-radius: 50px;
        height: 70px;
        background-color: transparent;
    }
    
    .form-control-rvics::placeholder,
    .form-control-gbics::placeholder,
    .form-control-costco-swics::placeholder,
    .form-control-sams-club::placeholder
    .form-control-brownie-skillet::placeholder, {
        color: #fff;
        font-weight: 500;
        font-size: 1vw;
    }
}

.sign-up-now-btn-gbics,
.sign-up-now-btn-gbics:hover {
    background-color: #018045;
}

.sign-up-now-btn-costco-swics,
.sign-up-now-btn-costco-swics:hover {
    background-color: #b06424;
}

.sign-up-now-btn-sams-club,
.sign-up-now-btn-sams-club:hover {
    background-color: #6c3c7c;
}

.sign-up-now-btn-brownie-skillet,
.sign-up-now-btn-brownie-skillet:hover {
    background-color: #f9bd01;
}




.form-control-gbics,
.form-control-gbics:focus {
    border: 3px solid #018045;
}

.form-control-costco-swics,
.form-control-costco-swics:focus {
    border: 3px solid #b06424;
}

.form-control-sams-club,
.form-control-sams-club:focus {
    border: 3px solid #6c3c7c;
}

.form-control-brownie-skillet,
.form-control-brownie-skillet:focus {
    border: 3px solid #f9bd01;
}


.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;
}

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

    .banner-content h2 {
        font-size: 3.5vw;
        transform: translate(5%, -25%);
        width: 55vw;
        }
    
        .banner_text {
            width: 82%;
        }
    
        .join-our-community {
            margin-top: 2%;
        }

        .join-the-community-heading {
            margin-top: 2%;
            font-size: 4vw;
        }

        .sign-up-now-btn, .sign-up-now-btn:hover {
            font-size: 2vw;
        }

        .form-control-rvics::placeholder {
            font-size: 2vw;
        }
        
        .form-control-brownie-skillet::placeholder {
            font-size: 2vw;
        }

}

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

    .banner-content h2 {
    font-size: 3.5vw;
    transform: translate(-10%, -25%);
    width: 55vw;
    }

    .banner_text {
        width: 82%;
    }

    .join-our-community {
        margin-top: 2%;
    }

}


.posts {
    height: auto;
    padding: 5vh 2vw 0vh 2vw;
  }
  
  .post_flex_row_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .post_flex_column_container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .post_container_1,
  .post_container_2 {
    height: auto;
    padding-right: 1vw;
  }
  
  .post_container_3 {
    width: 38vw;
  }
  
  .post-1 {
    width: 27vw;
    height: 169.5vh;
  }
  
  .post-2 {
    width: 22vw;
    height: auto;
  }
  
  .post-3 {
    width: 23vw;
    height: 86vh;
    margin-bottom: 2vh;
  
  }
  
  .post-4 {
    width: 23vw;
    height: 81.5vh;
  }
  
  .post-5 {
    width: 20vw;
    height: auto;
    margin-bottom: 2vh;
  }
  
  .post-6 {
    width: 20vw;
    height: 72vh;
  }
  
  .post-7 {
    width: 22vw;
    height: 17vw;
    margin-bottom: 1.5vh;
  }


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

  
    .post_container_1,
    .post_container_2 {
      height: auto;
    }
  
    .post-1 {
      width: 45vw;
      height: 57vh;
    }
  
    .post-2 {
      width: 53.5vw;
      height: auto;
      margin-left: 1.5vw;
    }
  
    .post-3 {
      width: 50vw;
      height: auto;
      margin-bottom: 1.5vh;
      padding-left: 1.5vw;
    }
  
    .post-4 {
      width: 50vw;
      height: auto;
      padding-left: 1.5vw;
    }
  
    .post-5 {
      width: 40vw;
      margin-bottom: 2vh;
      height: 51.5vh;
      margin-top: 1.5vh;
    }
  
    .post-6 {
      width: 40vw;
      height: auto;
    }
  
    .post-7 {
      width: 53.5vw;
      height: auto;
      margin-left: 1.5vw;
      margin-top: 1.5vh;
      margin-bottom: 2vh;
    }
  

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

  
    .post_flex_column_container {
      margin-top: -1.5vh;
    }
  
    .post_container_1,
    .post_container_2 {
      height: auto;
      padding-right: 1.3vw;
    }
  
    .post-1 {
      width: 45vw;
      height: auto;
  
    }
  
    .post-2 {
      width: 53.5vw;
      height: auto;
      margin-left: 1.5vw;
    }
  
    .post-3 {
      width: 50vw;
      height: auto;
      margin-bottom: 1.5vh;
      padding-left: 1.5vw;
    }
  
    .post-4 {
      width: 50vw;
      height: auto;
      padding-left: 1.5vw;
    }
  
    .post-5 {
      width: 40vw;
      margin-bottom: 2vh;
      height: auto;
      margin-top: 1.5vh;
    }
  
    .post-6 {
      width: 40vw;
      height: auto;
    }
  
    .post-7 {
      width: 53.5vw;
      height: auto;
      margin-left: 1.5vw;
      margin-top: 1.5vh;
    }
  

  }
  
  @media only screen and (min-width: 768px) and (max-width: 991px) {
  
    .post_container_1,
    .post_container_2 {
      height: auto;
      padding-right: 1.3vw;
    }
  
    .post-1 {
      width: 23vw;
      height: 83vh;
    }
  
    .post-2 {
      width: 25vw;
      height: 51vh;
    }
  
    .post-3 {
      width: 23vw;
      height: 37vh;
      margin-bottom: 1.5vh;
    }
  
    .post-4 {
      width: 23vw;
      height: 44.5vh;
    }
  
    .post-5 {
      width: 20vw;
      margin-bottom: 1.5vh;
      height: auto;
    }
  
    .post-6 {
      width: 20vw;
      height: 42.5vh;
      margin-bottom: 0vh;
    }
  
    .post-7 {
      width: 25vw;
      height: auto;
    }
  

  }
  
  @media only screen and (min-width: 992px) and (max-width: 1280px) {
  
    .post_container_1,
    .post_container_2 {
      height: auto;
    }
  
  
    .post-1 {
      width: 23vw;
      height: 86vh;
  
    }
  
    .post-2 {
      width: 25vw;
      height: 54vh;
  
    }
  
    .post-3 {
      width: 23vw;
      height: 43vh;
      margin-bottom: 1.5vh;
    }
  
    .post-4 {
      width: 23vw;
      height: 41.5vh;
    }
  
    .post-5 {
      width: 20vw;
      margin-bottom: 1.5vh;
      height: 40vh;
    }
  
    .post-6 {
      width: 20vw;
      height: 44.5vh;
      margin-bottom: 1.5vh;
  
    }
  
    .post-7 {
      width: 25vw;
      height: 30.5vh;
      margin-bottom: 1.5vh;
    }

  }