body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 20px;
}
h1, h2, h3 {
    font-weight: 600;
}
h1 {
    font-size: 3em;
    margin-bottom: 20px;
}
h2 {
    font-size: 2em;
    margin-top: 30px;
    margin-left: 20px;
}
h3 {
    font-size: 1.2em;
    margin-top: 20px;
    margin-left: 20px;
}
table {
    width: auto;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom:10px;
}
th, td {
    border: 1px solid #12121253;
    padding: 8px;
    text-align: left;
    text-overflow: ellipsis;
}
th {
    background-color: #f0f0f0;
    font-weight: bold;
}


p {
    margin: 20px;
    padding-top: 20px;
    font-size:large;
    
}

a{
    margin: 20px;
    padding-top: 20px;
    color:rgb(68, 12, 220);

}

.nlist {
  list-style-type: disc;
  margin-left:30px;
  padding:0;
  text-align: left;
  font-size:large; 
}

.card-heading {
 text-align: center;
 font-weight:bold;

}


.pros {
    color: green;
}
.cons {
    color: red;
}
.note {
    font-style: italic;
    color: #777;
    margin-top: 10px;
}
.cta {
    margin-top: 30px;
    text-align: center;
}
.cta a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.card  {
    /* Add shadows to create the "card" effect */
    border-width: 1px;
    border-color: rgb(31, 30, 30);
    box-shadow: 0 4px 8px 0 rgba(46, 45, 45, 0.701);
    transition: 0.3s;
    border-radius: 8px;
    margin:5px;
    
  }

  .main-content {
    display: flex;
    justify-content: center;
    width: 70%;
    margin:auto;
    box-sizing: border-box;
  }

  .ad-space {

    width:15%;
    border-width: 3px;
    border-color: black;
  }

  .card-price {
    font-size: small;
    border-style: solid;
    border-width: 3px;
    border-color: black;
    border-radius: 5px;
    margin:5px;
  }

 

  .card-container {
    display: flex; /* Enables flexbox for horizontal layout */
    flex-wrap: wrap; /* Allows cards to wrap onto the next line if needed */
    gap: 10px; /* Adds spacing between the cards */
  }
  
  .card-price {
    background-color: rgba(230, 229, 221, 0.973);
    border: 1px solid #ccc; /* Adds a border to each card */
    padding: 10px; /* Adds padding inside each card */
    text-align: left; /* Centers the text within each card */
    flex: 1; /* Makes the cards take up equal width */
    min-width: 150px; /* Sets a minimum width for the cards */
    /*box-sizing: border-box; /* Includes padding and border in the element's total width and height */
  }
  
  .card-price h3 {
    margin-top: 0; /* Removes default top margin from the heading */
  }



  .table-card {
    /* Add shadows to create the "card" effect */
    border-width: 3px;
    border-color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.701);
    transition: 0.3s;
    border-radius: 8px;
    margin:30px;

  }
  
  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgb(0, 0, 0);
  }
  
  /* Add some padding inside the card container */
  .container {
    padding: 5px;
    width:100%;
    margin: 10px auto; /* Center the container */
  }

  img {
    border-radius: 5px 5px 0 0;
  }
  .card-container {
    display: flex;
    flex-wrap: wrap; /* Allows cards to wrap */
    gap: 20px; /* Space between cards */
    justify-content: center; /* Center the cards horizontally */
  }
  
  .summary {
    
    padding: 20px;
    
    width: auto; /* Adjust as needed */
    /*box-sizing:content-box ; /* Include padding in width */ 
    display: flex; /* Use flexbox for layout within the card */
    flex-direction: row; /* Arrange items vertically */
    flex-wrap: wrap;
     /* Align items to the left*/ 
  } 

  .tbsummary {
    
    padding: 20px;
    
    width: auto; /* Adjust as needed */
    /*box-sizing:content-box ; /* Include padding in width */ 
    display: flex; /* Use flexbox for layout within the card */
    flex-direction: row; /*range items vertically */
    flex-wrap: wrap;
     /* Align items to the left*/ 
  } 



  
  .card-icon {
    
    font-size: 18px; /* Adjust icon size */
    font-family: sans-serif;
    margin-bottom: 10px;
    color: #020202c3; /* Example icon color */
    
  }
  
  .card-content {
    margin-bottom: 10px;
  }
  
  .card h3 {
    margin-top: 0;
  }
  
  .card-rating {
    display: flex; /* Use flexbox for rating area */
    align-items: center; /* Vertically align image and text */
    margin-top: auto; /* Push rating to bottom of card */
  }
  
  .card-rating img {
    margin-right: 5px;
  }

  .rating {
   /* display: inline-block;
    align-items: center; */
    display: flex; /* Use flexbox for rating area */
    align-items: center; /* Vertically align image and text */
    justify-content:center ;
  }

  .ulstyle {
    list-style-type: disc;
    margin:0;
    padding:0;
    margin-left: 15px;
    text-align: left;
    font-size: medium;
  }

  .tbp {
    margin: 20px;
    padding-top: 20px;
    font-size: medium;

}

.hero {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}



 
  
  /* Optional: Responsive adjustments */
  @media (max-width: 768px) {
    .card {
      width: 90%; /* Make cards take full width on smaller screens */
      margin: 10px auto; /* Center the cards */
    }
  }

  @media (max-width:768px) {
    .table-card {
      display: none;
    }
  }