.appsArea {

    width: 100%;
    height: fit-content;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

}



.apps_filterArea {
    width: calc(100% - 80px); /* 100% width minus 20px margin on each side */
    height: max-content;
    min-height: 10px;
    position: relative;
    margin-left: 40px;
    margin-right: 40px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */


    display: flex;
    flex-direction: column;

    align-items: center;

}





.apps_filterArea h1 {

    color: white;
    font-family:sans-serif;
    font-weight: 530;
    font-size: 150%;

    
 }

    .apps_filterArea .radio-container {
      text-align: center;
    }

    .apps_filterArea .radio-container input[type="radio"] {
      display: none;
    }

    .apps_filterArea .radio-container label {
      display: inline-block;
      margin: 5px;
      padding-top: 7px;
      padding-bottom: 7px;
      padding-left: 13px;
      padding-right: 13px;
      background-color: #eee;
      cursor: pointer;
      border-radius: 50px;
      font-size: 15px;
      min-width: 40px;

      font-family: 'Bricolage', sans-serif; /* Use 'AnekLatin' font, fallback to sans-serif if not available */
      font-weight: 500; /* Set the font weight to normal (regular) */
    }

    .apps_filterArea .radio-container input[type="radio"]:checked + label {
      background-color: #007AFF;
      color: #fff;
    }



    @font-face {
        font-family: 'Bricolage';
        src: url('BricolageGrotesque-VariableFont_opsz,wdth,wght.ttf') format('woff2'),
             url('BricolageGrotesque-VariableFont_opsz,wdth,wght.ttf') format('woff');
        /* Additional font properties... */
    }





.appsArea ol {
    padding: 0;
  

    margin-top: 30px;
    margin-left: 25px;
    margin-right: 25px;

    display: grid;
    
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Adjust min and max widths as needed */

    grid-gap: 30px; 

   }

.appsArea  li {
    width: 100%; /* Adjust the width based on the maximum number of cards per row */


  }






 
.card .banner {

    border-radius: 15px;
    box-shadow: none;

    

    width: 100%;


    aspect-ratio: 3.2 / 2;
    object-fit:cover; 

  
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: none;
       
    


}


.card  .card_app_icon {
    
    width: 14%;
    aspect-ratio: 1 / 1;
    align-self: center;

    object-fit: cover; /* Aspect fill */


    -webkit-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: none;
       


}


.appsArea .card  .card_text_area {
    
    height: 100%;
    padding: 0px;
  

    flex: 1;
    width: 100%;
    margin-left: 10px;




}


.appsArea .card .app_info_box {

    margin-top: 10px;
    padding: 0px;

    display: flex;
    flex-direction: row;
    column-gap: 10px;


}



.card_app_name {

  

  color: white;

  padding: 0px; 
  margin: 0px;
  margin-top: 5px;
  font-size: 100%;


  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif

}


.card_app_description {


    padding: 0px;
     margin: 0px; 
     margin-top: 10px;
      font-size: 100%;

      width: 100%;
      flex: 1;

  
      font-size-adjust: inherit;

      color: #A3A3A3;

      max-lines: 3;

      font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      font-weight: 320;
      font-size: 90%;
      

}



.card_links_box {

  width: 100%;
  height: 8.5%;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  gap: 20px;


}


.card_links_box .card_link_src_button {

    
  height: 100%;
  width: fit-content;
  
  background-color: #292929;
  border-radius: 50px;

  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  

}


.card_links_box .card_link_src_button img {

  width: 25px;
  height: 25px;
  aspect-ratio: 1 / 1;



  -webkit-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: none;
     

}

.card_links_box .card_link_src_button h2 {


  color: white;



  font-family: 'Aneklatin', sans-serif; /* Use 'AnekLatin' font, fallback to sans-serif if not available */

  font-weight: 550;
  font-size: 100%;
  letter-spacing: 1;
  width: 100%;

  text-align: center;
  padding: 0px;

}


@font-face {
  font-family: 'Aneklatin';
  src: url('AnekLatin[wdth,wght].ttf') format('woff2'),
       url('AnekLatin[wdth,wght].ttf') format('woff');
  /* Additional font properties... */
}














  @media (max-width: 530px) {




    .appsArea  li {        
        margin-top: 0px;
      }


      
 
  }