body {
  font-family: "Noto Sans Thai", sans-serif;
}

.color-heaher{
  background: rgb(204, 235, 233);
  background: linear-gradient(
    90deg,
    rgba(204, 235, 233, 1) 0%,
    rgba(179, 232, 229, 1) 0%,
    rgba(119, 191, 196, 1) 50%,
    rgba(47, 143, 157, 1) 100%
  );
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.color-heaher-menu{
  background: rgb(204, 235, 233);
  background: linear-gradient(
    90deg,
    rgba(204, 235, 233, 1) 0%,
    rgba(179, 232, 229, 1) 0%,
    rgba(119, 191, 196, 1) 50%,
    rgba(47, 143, 157, 1) 100%
  );
}

.color-menu{
  background-color: #EDFFFD;
}

.color-text-menu{
  color: #25465a;
}

.icon-menu {
  color: #25465a;
}

.color-menu-list{
  background: rgb(255, 255, 255);
  background: linear-gradient(188deg, rgba(185, 239, 237, 1) 0%, rgba(103, 205, 201, 1) 100%);
}


.bg-header-menu {
  background: rgb(255, 255, 255);
  background: linear-gradient(188deg, rgba(185, 239, 237, 1) 0%, rgba(103, 205, 201, 1) 100%);
  /* height: 100vh; */
  border-radius: 10px;
}

.bg-header-menu li {
  border-radius: 10px;
}


.icon-menus-h:hover {
  background-color: rgb(75 85 99);
  align-items: center
}

.icon-menus-h:hover path {
  color: white;
}

.texts-menus-h:hover {
  background-color: rgb(75 85 99);
}

.texts-menus-h:hover a {
  color: white;
}

.text-menus-h {
  font-weight: 600;
}


.heaher-scroll{
  transition: 0.5s;
  width: 100%;
  top: 0;
  z-index: 100;
  position: fixed;

  background: rgb(204, 235, 233);
  background: linear-gradient(
    90deg,
    rgba(204, 235, 233, 1) 0%,
    rgba(179, 232, 229, 1) 0%,
    rgba(119, 191, 196, 1) 50%,
    rgba(47, 143, 157, 1) 100%
  );
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.line {
  border: 1px solid #d5f2f1;
}
.logo-menu {
  height: 55px;
  width: 55px;
}
.icons-1 {
  width: 25px;
  height: 23px;
}
.icons-2 {
  width: 27px;
  height: 30px;
}
.icons-3 {
  width: 25px;
  height: 25px;
}
.icons-4 {
  width: 24px;
  height: 25px;
}
.icons-5 {
  width: 27px;
  height: 25px;
}
.icons-6 {
  width: 25px;
  height: 25px;
}
.icons-7 {
  width: 25px;
  height: 23px;
}

.font-navbar-m-0 {
  font-family: "Prompt", sans-serif !important;
  font-style: normal;
  font-weight: 900;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
  -webkit-text-stroke-width: 0.8px;
  -webkit-text-stroke-color: #69a9a9;
  -webkit-text-fill-color: #ffffff;
  /* text-shadow: 1px 15px 22px #6699aa; */
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.font-navbar-m-1 {
  font-size: 9.5px;
  font-weight: 400;
  color: #095661;
  font-style: normal;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.font-navbar-m-2 {
  line-height: 1.625;
  font-size: 9.5px;
  font-weight: 400;
  color: #294a4f;
  font-style: normal;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.out-navbar {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 89.06%;
  right: 3.44%;
  top: 12.68%;
  bottom: 83.1%;
  /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
}

.topnav {
  overflow: hidden;
  background: rgb(204, 235, 233);
  background: linear-gradient(
    90deg,
    rgba(204, 235, 233, 1) 0%,
    rgba(179, 232, 229, 1) 0%,
    rgba(119, 191, 196, 1) 50%,
    rgba(47, 143, 157, 1) 100%
  );
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.topnav .div-menu div {
  /* float: left; */
  /* display: inline-block; */
  color: #f2f2f2;
  text-align: center;
  /* padding: 14px 16px; */
  text-decoration: none;
  font-size: 17px;
}
.topnav .div-menu div.active {
  background-color: #04aa6d;
  color: white;
}

@media screen and (max-height: 450px) {
  .sidenav {
      padding-top: 15px;
      position: absolute;
      right: 0px;
  }

  .sidenav a {
      font-size: 18px;
  }
}

/* ถ้าขนาดเท่ากับ 1024px หรือน้อยกว่า 1024px ใหญ่ ไป เล็ก*/
@media screen and (max-width: 1279px) {
  .topnav .div-menu div:not(:first-child) {
    display: none;
  }
  .topnav div.icon {
    float: right;
    display: block;
  }
}
.topnav.responsive {
  transition: 0.5s;
  position: fixed;
  width: 100%;
  height: 100%;
  /* z-index: 10; */
  /* top: 0; */
}
.topnav.responsive .icon {
  position: fixed;
  right: 0;
  top: 0;
}
.topnav.responsive .div-menu div {
  float: none;
  display: block;
  text-align: left;
}

/* sm */
@media screen and (min-width: 640px) {
  .topnav.responsive  {
    transition: 0.5s;
    position: fixed;
    
    width: 100%;
    /* height: 90%; */
    /* width: 50%; */
    /* height: 100%; */
  }
}

/* md */
@media screen and (min-width: 768px) {
  .heaher-scroll{
    height: 80px;
  }
}

/* lg */
@media screen and (min-width: 1024px){
.color-heaher-menu{
  background: none;
  /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
}

  /* .topnav.responsive  {
    width: 35%;
  } */

  .bg-menu {
    padding: 5px 10px;
    position: relative;
  }
  .bg-menu:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #fff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }
  .bg-menu:hover:after {
    width: 100%;
    left: 0;
  }
  .bg-menu {
    /* text-align: left; */
    font-weight: 700;
    color: #25465a;
  }
  .bg-menu:hover {
    color: #ffff;
  }
  .bg-menu:hover path {
    fill: #ffff;
  }
  .bg-menu:hover p {
    color: #ffff;
  }

}
/* xl 
ถ้าขนาดมากกว่า 1024px PC เล็ก ไป ใหญ่*/
@media screen and (min-width: 1280px) {

  

  .heaher-scroll{
    height: 96px;
    display: grid;
    align-content: center;
  }
  .logo-menu-home {
    display: none;
  }
 
  
  .icons-1 {
    width: 30px;
    height: 32px;
  }
  .icons-2 {
    width: 55px;
    height: 32px;
  }
  .icons-3 {
    width: 30px;
    height: 32px;
  }
  .icons-4 {
    width: 22px;
    height: 32px;
  }
  .icons-5 {
    width: 35px;
    height: 32px;
  }
  .icons-6 {
    width: 34px;
    height: 32px;
  }
  .icons-7 {
    width: 30px;
    height: 32px;
  }
  .a-logo {
    display: none !important;
  }
}
.divlogo {
  display: flex !important;;
}

/* 2xl */
@media screen and (min-width: 1920px) {
  /* .bg-menu {
    font-size: 18px;
  }

  .bg-menu {
    width: 100px;
    padding: 10px 10px;
  } */
  .heaher-scroll{
    height: 96px;
  }
}