/*billing*/
.billing-section {
 display: flex;
 margin-top: 4rem;
 margin-bottom: 2rem;
}

.billing-aside-text {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 width: 29%;
 margin-top: -1.5rem;
}

.aside-letter {
   font-family: "Suisse Int Cond Semi";
  color: #ff7a6b;
  font-size: 4.78rem;
  text-transform: uppercase;
  transform: rotate(25deg);
  margin:auto auto 1rem auto;
}

.billing-block-column {
 display: flex;
 flex-direction: column;
 width: 71%;
}

.billing-block-header {
  font-family: "Suisse Int Cond Semi";
  font-size: 3.75rem;
  color:  #124573;
  text-transform: uppercase;
}

.billing-block-paragraph {
  font-family: "BrandonGrotesque-Light";
  font-weight: 600;
  font-size: 2.25rem; 
  width: 80%;
  margin-bottom: 2rem;
}


/*community-section*/


.community-section {
 margin-top: 5rem;
}

.community-section-text {
 width: 90%;
 margin: auto;
}

.community-text-header {
   font-family: "Suisse Int Cond Semi";
  font-size: 8.75rem;
  line-height: 7.69rem;
  color:  #124573;
  text-transform: uppercase;
  margin-top: 4rem;
}

.community-text-paragraph {
   font-family: "BrandonGrotesque-Light";
  font-weight: 600;
  font-size: 2.25rem;
  margin-top: 3rem;
}


/*more good things*/
.more-good-things {
 display: flex; 
 justify-content: space-around;
 margin: 5rem auto auto auto;
 width: 90%;
}

.more-good-things-text {
  width:50%;
}

.more-good-things-img-div {
 height: auto;
 width: 45%;
}

.more-good-things-image {
 height: 100%;
 width: 100%;
}

.more-good-header {
 font-size: 97px;
 color: #ff7a6b;
 text-transform: uppercase;
 font-family: "Suisse Int Cond Semi";
}

.more-good-paragraph {
   font-family: 'SuisseWorks';
 font-size: 2.75rem;
 color:  #124573;
 margin-top: 1rem;
   font-weight: 200;
}







@media (min-width: 768px) and (max-width: 1024px)  {
  /*billing section*/
  .billing-section {
   margin-top: 3rem; 
  }
  
  .billing-block-header {
  font-size: 2.6rem;
}

.billing-block-paragraph {
  font-size: 1.56rem; 
}
  
  .aside-letter {
   font-size: 3.38rem; 
  }
  
  /*chill-liquid-images*/
  .liquid-images-1 {
   margin-top: 2rem; 
  }
  
  /*community*/
  .community-images {
   margin-top: -5rem; 
  }
  
  .community-text-header {
   margin-top: 1rem; 
   font-size: 6rem;
   line-height: 5.4rem;
  }
  
  .community-text-paragraph {
    margin-top: 1rem; 
    font-size: 1.5rem;
    line-height: 1.6rem;
  }
  
  .more-good-things {
   margin-top: 2rem; 
  } 
  
  .more-good-header {
 font-size: 68px;
 
}

.more-good-paragraph {
 font-size: 31px;
}
 
} 
  

  
@media (min-width:425px) and (max-width: 767px) {  
  .billing-section {
   margin-top: 3rem; 
  }
  
  .billing-block-header {
  font-size: 2.6rem;
   font-size: 26px;
   line-height: 19px;
}

.billing-block-paragraph {
  font-size: 16px;
  line-height: 16px;
}
  
  .aside-letter {
   font-size: 29px
  }
  
  .chill-liquid-images {
   margin-top: 1rem; 
  }
  
  .community-section {
   margin-top: 1rem; 
  }
  
  .community-text-header {
    font-size: 54px;
    line-height: 48px;
    margin-top: 1rem;
  }
  
  .community-text-paragraph {
    font-size: 20px; 
    line-height: 21px;
    margin-top: 1rem;
  }
  
  .more-good-things {
   margin-top: 1rem; 
   
  }
  
  .more-good-things-text {
   width: 50%; 
  }
  
  .more-good-header {
 font-size: 54px;
 
}

.more-good-paragraph {
 font-size: 21px;
}
  
}











@media(min-width: 320px) and (max-width: 424px)  {
   .billing-section {
   margin-top: 3rem; 
  }
  
  .billing-block-header {
  font-size: 2.6rem;
   font-size: 26px;
   line-height: 19px;
}

.billing-block-paragraph {
  font-size: 16px;
  line-height: 16px;
}
  
  .aside-letter {
   font-size: 29px
  }
  
  .chill-liquid-images {
   margin-top: 1rem; 
  }
  
  .community-section {
   margin-top: 1rem; 
  }
  
  .community-text-header {
    font-size: 54px;
    line-height: 48px;
    margin-top: 1rem;
  }
  
  .community-text-paragraph {
    font-size: 20px; 
    line-height: 21px;
    margin-top: 1rem;
  }
  
  .more-good-things {
   margin-top: 1rem; 
   
  }
  
  .more-good-things-text {
   width: 50%; 
  }
  
  .more-good-header {
 font-size: 34px;
 
}

.more-good-paragraph {
 font-size: 16px;
}
}