<style media="screen">
  body{
    font-family: 'PSL242pro';
    font-size: 20pt;
  }
  @font-face {
   font-family:'PSL242pro';
   src: url('../fonts/Kittithada/PSL242pro.ttf') format('truetype');
  }
  @font-face {
   font-family:'PSL243pro';
   src: url('../fonts/Kittithada/PSL243pro.ttf') format('truetype');
  }
  @font-face {
   font-family:'PSL244pro';
   src: url('../fonts/Kittithada/PSL244pro.ttf') format('truetype');
  }
  @font-face {
   font-family:'PSL255pro';
   src: url('../fonts/Kittithada/PSL255pro.ttf') format('truetype');
  }
  .small, small{
    font-size: 14pt;
  }
  .btn-mj1{
    color: #ffffff;
    background-color: #014da1;
    border-color: #014da1;
  }
  .btn-mj1:hover{
    color: #014da1;
    background-color: #ffffff;
  }
  .bg-mj1{background-color: #014da1;}
  .border-mj1::after{
    content: "";
    width: 29%;
    height: 37%;
    position: absolute;
    border-bottom: 3px solid #014da1;
    left: 36%;
  }
  .text-mj1{color: #014da1;}
  .dropdown-menu{font-size: inherit;}
  .circle::before{
    content: "";
    width: 20rem;
    height: 20rem;
    position: absolute;
    border: 3px solid #95cee1;
    background-color: #95cee1;
    left: -6%;
    border-radius: 100%;
    top: 0%;
    z-index: 1;
  }
  .circle::after{
    content: "";
    width: 5rem;
    height: 5rem;
    position: absolute;
    border: 3px solid #95cee1;
    background-color: #95cee1;
    left: 21%;
    border-radius: 100%;
    top: 15%;
    z-index: 1;
  }
  .circle2::before{
    content: "";
    width: 27rem;
    height: 27rem;
    position: absolute;
    border: 3px solid #95cee1;
    background-color: #95cee1;
    top: 40%;
    z-index: 1;
    right: -11%;
    border-radius: 100%;
  }
  .img-filter-mj1{filter: drop-shadow(0px 0px 2px white);}
  .h-min-500{min-height: 500px;}
  .bg-title{
    width: 800px;
    height: 500px;
    background-color: #014da1;
    border-bottom: 0;
    border-radius: 100%;
    position: absolute;
    z-index: -1;
    top: -419px;
    color: #ffffff;
  }


  .nav-link{
    padding: 0rem 0rem;
    color: #ffffff;
  }
  .nav-item{
    padding: 0px 5px;
  }
  .dropdown-toggle::after {
    display: none;
  }
  @media (min-width:1023.99px) {
    h2 {
     font-size: 3.5rem;
   }
   .title_1{
     margin-top: -28px;
   }
   .nav-i{
     border: 1px solid #014da1;
     background-color: #014da1;
   }
   .fig-1{
     width: 42%;
      float: right;
      padding-left: 1rem;
   }
   .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link{
     color: #014da1;
     border: 2px solid #014da1;
   }
   .navbar-light .navbar-nav .nav-link{
     color: #ffffff;
   }
  }
  .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link{
    color: #014da1;
  }
  .navbar-light .navbar-nav .nav-link:hover{
    color: #014da1;
    border: 2px solid #014da1;
    background-color: #ffffff;
  }
  .dropdown-item{
    color: #014da1;
  }
  @media (max-width:1023.98px)  {
    .dropdown-menu{
      color: #014da1;
      border: 0px solid rgba(0,0,0,.15);
    }
    .navbar-light .navbar-nav .nav-link{
      color: #014da1;
    }
    .fig-1{
      width: 42%;
       float: right;
       padding-left: 1rem;
    }
  }
  .line-1:before{
    content: "";
    width: 5px;
    height: 90%;
    position: absolute;
    left: 50%;
    margin-top: 10%;
    border-left: 1px dashed #014da1;

  }
  @media (max-width:620.99px)  {
    h2{font-size: 33pt;}
    p{line-height: 21pt;}
    .fig-1{
      width: 80%;
      padding-top: 0.75rem;
      float: left;
      margin-left: 10%;
      display: block;
    }
  }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-white px-md-5 fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="../" class="position-relative">
      <img src="../redbag/icon/logo_1.png" alt="" width="70" class="position-absolute;">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link  rounded-pill text-center px-4 <?php echo (@$page=='history')?'active':'nav-i'; ?>" aria-current="page" href="../history/"><?php echo $header[0]; ?></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle rounded-pill text-center px-4 <?php echo (@$page=='product-service')?'active':'nav-i'; ?>" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <?php echo $header[1]; ?>
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item text-center text-md-start" href="../product-service/index.php"><?php echo $header[4]; ?></a></li>
            <li><a class="dropdown-item text-center text-md-start" href="../product-service/index2.php"><?php echo $header[5]; ?></a></li>
            <li><a class="dropdown-item text-center text-md-start" href="../product-service/index3.php"><?php echo $header[6]; ?></a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link rounded-pill text-center px-4 <?php echo (@$page=='workings')?'active':'nav-i'; ?>" href="../workings/"><?php echo $header[2]; ?></a>
        </li>
        <li class="nav-item">
          <a class="nav-link rounded-pill text-center px-4 <?php echo (@$page=='contact')?'active':'nav-i'; ?>" href="../contact/"><?php echo $header[3]; ?></a>
        </li>
      </ul>
    </div>
  </div>
</nav>