body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Arimo', sans-serif; 
  /* background-color: #548076;  */
    /* #FFD700 */
     /* #0202a2 */
  background-color:#0202a2;  /*สี background ของ page*/
  /* background-color:#191970; */
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2vw;
  padding: 1rem 2rem; 
  /* background-color: rgb(46, 255, 192); */
  /*background-color:#000080;*/ /*สีพื้นหลังเมนู */
  /* #0202cc */
  /* #FFFFFF */
  /* #00FFFF */
  /* #FFD700 */
  background-color:#FFFFFF;
}

.logo img {
  height: 80px; 
  border-radius: 5px;
}

/* Menu Style */
ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  margin: 0 1rem;
}

a {
  text-decoration: none;
  /* color: #000000; สีดำ*/
  /* color: #228B22; สีเขียวเข้ม*/
  /* color: #007bff; สีน้ำเงิน*/
  /* color: #dc3545; สีแดง*/
  /* Color:#fec04c;  สีส้ม*/
  /* Color:#ffa600;  สีส้มสว่าง*/
  /* color: #554a8f; สีม่วงเข้ม*/
   Color:#0202cc ;
  font-size: 1.2vw;
}

a:hover {
  font-weight: bold;
  text-decoration: underline;
}

/* Slideshow */
.Slidepic {
  /* background-color:#00008B; */
  background-color:#0202a2;
  
  /* background-color: #548076; */
  height: max-content;
  width: 100%;
}

.slide img {
  width: auto; 
  height: auto; 
  max-width: 100%;
  max-height: 100%; 
  border-radius: 20px;
}

.slider-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  display: flex; 
  justify-content: center;
  align-items: center; 
}

.slide {
  display: none;
}

.slide.active {
  display: block;
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* background:#00008B; */
  background-color:#191970;
  /* background: #faf8f84d; */
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}

.prev-btn {
  left: 0;
}

.next-btn {
  right: 0;
}

/* Welcome Message */
.Bandner {
  display: flex;
  justify-content: center;
  align-content: center;
}

/*กำหนดขนาดกรอบของ Welecome paragraph*/
.Bandnerframe {
  width: 60%;
  text-align: center;
  padding: 20px;
}

.Bandnerframe p{
  text-align: left;
  text-indent: 10ch;
  padding: 20px
} 

.Bandner h1 {
  font-size: 3.5em;
  Color:#fec04c;
  /* color: bisque; */
  margin-bottom: 10px;
  padding: 20px
}

.Bandner p {
  font-size: 1.5em;
  line-height: 1.6;
  Color:#fec04c;
  /* color: #ffe3c2; */
  text-align: left; 
}

/* Solutions */
.Solutions {
  justify-content: center;
  align-content: center;
  /* overflow: auto; */
  gap: 1rem; 
  padding: 1rem; 
 
}
.solutionContainer{
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  grid-gap: 20px; /*Adjust as needed */
  padding: 1rem; 
  width: auto; 
  min-height: 500px; 
  justify-content: center;
  align-content: center; 
  overflow-x: auto;
  margin: 0 auto; 
  /* border: solid 3px red  */
}


.SolutionItems {
  display: inline-block; 
  padding: 1rem; 
  Color:#fec04c;
  /* color: #ffe3c2; */
  text-align: center;
  font-size: 1.2vw; 
  width: auto;  /* Adjust as needed */
  box-sizing: border-box; 
  /* border: solid 3px yellowgreen; */
}

.SolutionItems P {
  font-size: 1em; 
  width: auto;
  margin: 1rem auto; 
}

.SolutionItems a {
  font-size: 1.5em;
  Color:#fec04c;
  /* color: #a9a44f; */
}
.SolutionItems img {
  max-width: 100%;
  height: auto;
  border-radius: 10%;
  margin-bottom: 10px;
}  
.SolutionItems img { /* เพิ่ม  cursor: pointer  ให้กับรูปภาพ */
  cursor: pointer;
}


/* Main Content */ 
main { 
  flex-grow: 1; /* ให้ main content ขยายเต็มพื้นที่ที่เหลือ */
}

.OurProducts {

  /* background-color: #548076; */ /*สี background product*/
  padding: 20px;
}

.OurProducts h1{
 
  font-size: 6em;
  Color:#fec04c;
  /* color: bisque; */
  margin-bottom: 10px;
  text-align:center;
}

.product-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr); /* กำหนด 4 คอลัมน์ */
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   padding: 1rem; 
   width: auto; 
   min-height: 500px; 
   justify-content: center;
   align-content: center; 
   overflow: auto;
   margin: 0 auto; 
}

.product-item {
  text-align: center;
  width: auto; 
  background-color: rgb(233, 248, 243);
  border-radius: 40px;
  padding: 1rem;
}

.product-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item a{
  padding: 1rem;
  margin-top: 1rem;
 
  font-size: 1em; 
  display: block; 
  text-align: center;
}

/* Footer */
footer {
  /* #0202cc */
  /* #FFFFFF */
  /* #00FFFF */
  /* #FFD700 */
  background-color: #FFFFFF;
  /* background-color: rgb(46, 255, 192); */
  Color:#0202cc;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 2cqmin;
}

footer .container {
  display: flex;
  justify-content: space-around; 
  width: 100%;
  margin-bottom: 2rem; 
}

footer .left, 
footer .right {
  text-align: left;
}

footer .right {
  margin-left: 5rem; 
}

footer a {
  Color:#0202cc;
  /* color: blue; */
  text-decoration: none; 
}

/* Responsive Design */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .SolutionItems {
    font-size: 1em; 
  }
  .SolutionItems a {
    font-size: 1em; 
  }
  .Bandner h1 {
    font-size: 2em; 
  }
  .Bandner p {
    font-size: 1em; 
  }
  .OurProducts h1 {
    font-size: 3em; 
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
  .navbar ul {
    flex-direction: column;
  }
  .SolutionItems {
    font-size: 0.8em; 
  }
  .SolutionItems a {
    font-size: 0.8em; 
  }
}