/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

.dot {
    height: 100px;
    width: 100px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
  }

.hmc {

  color: #4AA888;
  
}
.logobox{
  /* background-color:#000; */
  justify-content: center;
  align-items: center;
  display: flex;
  padding-top: 50px;
}


@media (max-width: 768px) {
  .logobox img {
      padding-top:40px;
  }
}

.logobox{
  /* background-color:#000; */
  justify-content: center;
  align-items: center;
  display: flex;
  padding-top: 50px;
}


hr.new5 {
  height:0;
  border: 1px solid #4AA888;
  border-radius: 5px;
  background-color:#4AA888
}

.kanit {
  font-family: "Kanit", sans-serif
}
.center-screen {
  display: flex;
  
}

.bggreen{
  background-color: #CEE0DA;
}

.about {
  font-size: 20px; ;
  color: #4AA888;
}

.kanit_h4 {
  font-size: 24px;
  color: #777777;
  font: weight 400px; ;
  font-family: "Kanit", sans-serif ;
}

.kanit_h5 {
  font-size: 20px;
  color: #777777;
  font: weight 400px; ;
  font-family: "Kanit", sans-serif ;
}

@keyframes fadeInLeft {
  from {
      opacity: 0;
      transform: translateX(-50px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
      opacity: 0;
      transform: translateX(50px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}



.navbar-toggler {
  margin-left: auto;
  background-color: rgb(255, 255, 255);
}

  
.nav-item1{
  max-height: 70px;
  
}



hr.new6 {
  border: 1px  #000000;
  border-radius: 5px;
  background-color:#000000;
  margin:0px
  
}

@media only screen and (max-width: 600px) {
  .kanit_h4 br {
      display: none;
  }
}


/* สำหรับหน้าจอมือถือ */
@media (max-width: 768px) {
  .image-container img {
      width: 290px;
      height: 435px;
      
  }
}

/* สำหรับหน้าจอแท็บเล็ตและหน้าจอขนาดใหญ่ */
@media (min-width: 769px) {
  .image-container img {      
      width: 382.5px;
      height: 573.75px;
  }
}

.image-container {
  display: flex;
  justify-content: center; /* จัดกลางแนวนอน */
  align-items: center; /* จัดกลางแนวตั้ง */
}

@media (min-width: 769px) {
  .custom-m {
      /* padding-left:300px; */
  }
}

@media (min-width: 992px) {
  .kanit-h4 {
      font-family: Kanit;
      font-size: 24px;
      font-weight: 400;
      line-height: 36px;
      letter-spacing: 0em;
      text-align: left;
  }
}

@media (min-width: 769px) {
  .image-container-G img {      
      padding: 20px;
  }
}

@media (min-width: 768px) {
  .image-container-G img {      
      padding-left: 20px;
      padding-right: 20px;
  }
}

@media (min-width: 769px) {
  .image-container-GSS img {      
      padding: 20px;
  }
}

@media (min-width: 769px) {
  .image-container4 img {      
    width: 375px;
    height: 340px;
    
  }
}

@media (min-width: 768px) {
  .image-container4 img {      
      padding-left: 10px;
      padding-right: 10px;
      
  }
}

@media (min-width: 768px) {
  .image-container-R img {      
    width: 460px;
    height: 288px;
      
  }
}