/** Shopify CDN: Minification failed

Line 193:23 Expected identifier but found "*"
Line 401:2 Unexpected "}"

**/
.spacing-blog{
  padding-top: 0px;
}
.show-article-button{
  text-transform: capitalize;
}
.article_step-two{
  background-color: #004F71;
  padding: 0 5%; 
  min-height: 75vh;
  height: fit-content;
}
.button-cloud-mob{
  max-width: 140px;
  max-height: 140px;
  z-index: 50;
}
.social-media-mob{
  display: none;
}
.products_container{
  display: flex;
  height: 100%;
  gap:10%;
}
.product_page_title{
  font-size: 30px;
  color: white;
  width: 100%;
  text-align: center;
}
.product_left{
  width: 40%;
  padding: 4% 0;
}
.product_right{
  width:60%;
  padding: 4% 0;
      display: flex;
    flex-direction: column;
    gap: 17%;
}
.article-image-product{
   border-radius: 30px;
   max-height: 45vh;
}
.soc-ico{
  width:70px;
  height:auto;
  display:block;
}
.social-media{
      display: flex;
    padding-left: 5%;
    padding-top: 5%;
  gap:8%;
}
.social-media-icons{
  width: 45%;
  display: flex;
  flex-wrap: wrap;
  gap: 15%;
}
.cloud-button-text{
  text-transform: capitalize;
}
.cloud-button-text1{
  text-transform: capitalize;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: 150%;
}
.product-img{
  max-width:150px;
  height:100%;
  width: 100%;
  max-height: 162px;
  border-radius: 30px;
  margin-bottom: 10%;
}
.product-img img{
  border-radius: 20px;
  height: 100%;
}
.product_listings{
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  justify-content:center;
}
.product-ttl{
  color:white;
  font-size: 19px;
  text-decoration: underline;
  margin: 0;
  padding: 0;
}
.product-price{
  color:white;
  font-size: 19px;
  margin: 0;
  padding: 0;
}
.product-info{
  max-width:150px;
  text-align: center;
  height: 100%;
}


@media screen and (max-width: 750px){
  .social-media{
    display:none;
  }
.products_container{
    flex-direction: column;
  }
  .products_container{
    border-radius: 15px;
  }
  .article-image-product{
    width:50%;
  }
  .product_left{
    padding: 10% 0 4% 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
  }
  .product_right{
    width: 100%;
  }
  .product_page_title{
    font-size: 16px;
    width: 100%;
    text-align: center;
   padding: 0 8% 10% 8%;
    line-height: 18px;
  }
  .product-img{
    max-width: 70px;
    max-height: 70px;
  }
  .product-img img{
    height: 70px;
    width: 70px;
  }
  .product-ttl{
    font-size:12px;
  }
  .product-price{
    font-size:12px;
  }
  .product_listings{
    flex-wrap: nowrap;
  }
  .social-media-mob{
    display: flex;
  }
  .cloud-button-text1{
    left: 52%;
    bottom:  12%;
  }
  .soc-ico svg{
    height: 40px;
    width: 40px;
  }
  .social-media-icons{
    flex-wrap: nowrap;
    align-items: center;
  }
  .button-cloud-mob{
    max-width: 90px;
    max-height: 90px;
    z-index: 50;
  }
}
@media screen and (min-width: 750px) and (max-width: 1350px){
  .product-img img{
    width: 100px;
    height: 100px;
  }
  .product_listings{
    display: flex;
    flex-wrap: nowrap; */
    gap: 0%;
    justify-content: center;
    width: 100%;
  }
  .product_page_title{
    font-size: 22px;
  }
  .soc-ico svg{
    width: 50px;
    height: 50px;
  }
  .social-media-icons{
    gap: 5%;
  }
}






.article-content{
    align-items: center;
    display: flex;
    flex-direction: column;
    background-color: #004F71;
    text-align: center;
  }
  .story-text{
    display: none;
  }
  .buttons{
    /* display: flex; */
    flex-direction: row;
    display: none;    
    justify-content: end;
    width: 100%;
  }
  .story-counter{
    color: white;
    display: none;
    opacity: 0;
    transition: opacity 2s ease;
  }
  #story-1{
    display: block;
  }
  .prev-button{
    display: none;
  }
  .article-image{
    border-radius: 20px;
  }
  .cloud-button-wrapper{
    cursor: pointer;
  }

/* mobile view */

  @media(max-width:749px){
    .content-box{
      max-height: 25em;
    }
    .article-image{
      margin-top: 10%;
      margin-bottom: 10%;
      width: 75%;
      max-height: 275px;
    }
    .cloud-button-wrapper{
      position: relative;
      text-align: center;
      color: white;
    }
    .cloud-button-text{
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .buttons{
      gap: 8em;
    }
    .article-heading{
    padding-top: 5%; 
    padding-bottom: 3%;
    }
    .button-cloud{
      max-width: 110px;
      max-height: 110px;
      z-index: 50;
    }
    .show-article-button{
     position: absolute;
        top: -52px;
        right: 32%;
        transform: translate(0%, -50%);
    }
    .intro-section{
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      padding-bottom: 5%;
    }
    .intro-section :nth-child(1) { 
      order: 2; 
      font-size: 16px;
      width: 70%;
    }
    .intro-section :nth-child(2) {
      order: 3; 
      font-size: 18px;
      width: 70%;
    }
    .intro-section :nth-child(3) { order: 1; }
  }

/* dekstop view */
  @media(min-width: 750px){
  .story-text{
    font-size: 22px;
    line-height: 30px;
  }
  .buttons{
    gap: 30em;
    position: absolute;
    bottom: -40px;
  }
  content-box{
     max-height: 40em;
  }
  .article-header-text{
    font-size: 25px;
  }
  .article-image{
    max-height: 60vh;
  }
  .show-article-button{
    position: absolute;
    top: -80px;
    right: 50%;
    transform: translate(50%, 0%);
  }
  .button-cloud{
    max-width: 140px;
    max-height: 140px;
    z-index: 50;
  } 
  .cloud-button-wrapper{
    position: relative;
    text-align: center;
    color: white;
  }
  #showButton{
    /* left: 15em; */
    left: 0;
  }
  .cloud-button-text{
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .article-content{
      flex-direction: row;
      padding: 0 5%;
      min-height: 80vh;
      height: fit-content;
      gap: 15%;
    }
    .intro-section{
      flex-direction: column;
    }
    .content-section{
      flex-direction: column;
      padding-top: 3em;
      position:relative;
    }
    .article-heading{
      padding-bottom: 5%;
    }
    .blog-name{
      color: #97D700;
      padding-bottom: 3%;
    }
  }
  .article-heading{
    color: white; 
  }
  .content-box{
    opacity: 0;
    transition: opacity 2s ease;
    display: none;
    max-width: 55em;
    background-color: white;
    border-radius: 40px;
    padding: 2em;
    overflow: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.content-box::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
  .blog-name{
    color: #97D700;
}
  }