.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 64.2rem;
    margin-left: 5rem;
    margin-top: 3rem;
    color: #0b0101;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 20px;
    font-family: "Kanit", sans-serif;
}
.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    width: 64rem;
    margin-left: 5rem;
}

/* Add a background color to the active tab content */
.tabcontent.active {
  display: block;
}

/* Style the accordions */
.accordion {
  margin-bottom: 10px;
  background-color: #182c4c;
}

.accordion-btn {
    background-color: #182c4c;
    color: #e7e1e1;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-family: "Kanit", sans-serif;
    font-size: 16px;
}
.tabcontent h3{
    font-family: "Kanit", sans-serif;
    color: #0b0101;
    text-align: justify;
    padding: 10px;
}
.accordion-content {
  display: none; /* Hide accordion content by default */
  background-color: #f9f9f9;
  border-top: 1px solid #ddd;
  padding: 10px 30px;
  text-align: justify;
}

.active-accordion {
  background-color: #ccc;
}

/* Style the accordion images */
.accordion-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 10px;
}

.accordion-img-grid img {
  width: 100%;
  height: auto;
}
/* ============================enlarges image=======
 */
 .accordion-img-grid img {
  transition: transform 0.3s ease;
}

.accordion-img-grid img:hover,
.accordion-img-grid img.active {
  transform: scale(1.2);
}
/* ======================================================== */

      
@media (max-width: 780px) {
  .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 19.5rem;
    margin-left: 2rem;
    margin-top: 3rem;
    color: #0b0101;
}
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  width: 19.5rem;
  margin-left: 2rem;
}


 }
 @media (max-width: 768px) {
  .accordion-content {
    display: block; 
    margin-bottom: 20px; 
    grid-template-rows: 1fr;
  }

 
}