@media screen and (max-width: 768px ){
  [aria-controls="navbarDropdown"] {
      /*display navbar button*/
    display: block;
  }

  [aria-expanded="false"] ~ ul {
    /*when not expanded-list is hidden*/
    display: none
  }

  [aria-expanded="true"] ~ ul {
    /*when menu button is clicked/expanded- display*/
    display: block;
    position: absolute;
    right: 0;
    top: var(--size-50);
    background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5));
    width: 100%;
    text-align: right;
    box-shadow: 0 0 20px rgba(52, 49, 75, .1)
  }
  
  [aria-expanded="true"] ~ ul li a {
    margin-right: var(--size-20);
    color: var(--font-color-dark);
  }


  .top-half h4 {
    width:10rem
  }

  .header-title{
    margin-top: 80px;
  }

  .nav-link a:hover {
    color: rgb(69, 69, 69)
  }
  
.recent-posts{
    grid-column: 1/3;
    max-width: 316px;
    padding-left: 35px;
  } 

  .recent-post h6 {
    margin: 0 0 0 0;
  } 

  .recent-post h6 a {
    line-height: 1;
  }
}

@media screen and (max-width: 599px){
  
  .price-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--size-18);
  margin: auto;
  align-items: flex-start;
  padding: 1rem;
  }

  #scrollUp {
    right: 3rem;
  }

  .footer-col{
    text-align: center;
    
  }
  .footer-col >h5{
    font-size: large;

  }
  .recent-posts {
    padding-left: 0
  }

  .footer-bottom-container {
    flex-direction: column;
    align-items: center;
  }
  
  .footer-bottom-container p{
    margin: 0
  }
}


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

  .content-wrapper{
    text-align: center;
  }

  .content-container {
    padding: 60px 0
  }

  .footer-top-container {padding: 1rem;}

  .price-btn-wrapper > .btn {
    width: -webkit-fill-available;
  }

  .footer-col{
    order: 3;
  }

}