table{
      border-collapse: collapse;
      width: 100%; 
      border: 1px solid #d83131;
    }
    
@media screen and (min-width: 1050px) {
  table {
    width: 80%;
  }
  
}




@media screen and (min-width: 700px){
#offline-schedule-app-hero-links{
  
    max-width: 50%;
  padding-left: 5px;

   
}
}

@media screen and (min-width: 1300px){
#offline-schedule-app-hero-links{
  
    max-width: 24%;
 

   
}
}





#offline-schedule-app-hero-links > ul{
     list-style: none;
     text-decoration: none;
       padding-left: 5px;
    
}


#offline-schedule-app-hero-links > ul > a > li{
    padding-bottom: 5px;
    
}



body {
  font-family: "Inter", system-ui, sans-serif;
}


 #main{
       max-width: 90%;
      
        margin: auto;
        padding: 1% 2%  2% 2%;
          }

body p{
    
    font-size: 1rem;
}


h1, h2, h3, h4, h5, h6 {
  font-family: "Merriweather", Georgia, serif;
}







.footer-links > a{
    padding: 30px 0px;
    text-decoration: none;
    font-weight: 20;
    font-weight: 400;
    margin-bottom: 20px;
}

a{
    font-weight: bold;
}




a:hover{
    color: rgba(190, 85, 50, 90%);;
}

h1{
    
    color: rgba(150, 20, 255, 100%);
}


h2{
    
    color: brown;
}

h3{
   color: rgba(140, 85, 50, 90%);
    font-size: 1.6em;
   
}


table  tr{
  border: 2px solid rgb(173, 173, 131);
  text-align: center;
}

table td{
  border: 1px solid #b6f102;
  padding: 4px;
}

table th{
  padding: 4px 0;
  font-size: 14px;
}

#download-img, #play-button, #schedule-icon, #wifi-icon, #free-icon, #clock-icon{
  width: 30px;

  
}

button{
   cursor: pointer;
  display: grid;
grid-template-columns: 30px auto;
  align-items: center;
  grid-gap: 10px;
  background-color: rgba(199, 213, 200, 0.4);
 border: 1px solid #b6f112;

  padding: 8px 10px;
  margin: 10px 0;
}

  #demo-link, #download-link{
  text-decoration: none;
 
}

#button-container{
  display: flex;   

  gap: 20px;
  flex-wrap: wrap;
}


/* Main flex container for the generator section */
@media screen and (min-width: 1050px) {
  #generator-section-flex-container{
    display: flex;
    align-items: center;
    gap: 20px;
  }
}


@media screen and (min-width: 1050px) {

  #generator-section-flex-1{
  width: 50%; 
}
  
}


#best-offline-scheduling-apps-hero-img-container{
 
   
    margin: auto;
}

#best-offline-scheduling-apps-hero-img-container > img{
    width: 100%; 
   /* max-width: 1539px; */
}


#generator-img{
  width: 100%; height: auto;
}


.app-description{
  display: grid; grid-template-columns: auto 1fr; gap: 8px; 
  align-items: center; margin-bottom: 10px;

}


footer{
  
    width: 90%;
    margin: auto;
}