/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    html {
      font-family: 'Noto Sans Thai', sans-serif;
    }
    h1 {
      @apply text-2xl;
    }
    h2 {
      @apply text-xl;
    }
    ul{
      @apply list-disc;
    }
    ol{
      @apply list-decimal;
    }
    .cardxl{
      padding-right: 2rem;
    }
    @media only screen and (max-width: 1024px) {
      .cardxl{
        padding-right: 0rem !important;
        padding-bottom: 2rem;
      }
      .breadTaxt{
        width:150px;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .tableScroll {
        display: table !important;
        height: auto !important;
      }
     
    }
    .tableScroll {
      display: block;
      height: 505px;
      overflow-y: auto;
    }
    .p-one{
      background-image:  linear-gradient(to top,rgba(71, 85, 105, 0.647),rgba(67, 84, 107, 0.807)),url('/images/p1.jpg'); 
    }
    .parallax-inner{
      position:relative;
      min-height: 130px;
      background-position: top center;
      background-attachment: fixed;
      background-size: cover;
    }
    .parallax-inner > h2{
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 2px;
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -20.5px;
      width: 100%;
      text-align: center;
      font-weight: 600;
      font-size: 1.5rem !important;
    }
    .breadTaxt{
      font-weight: 300;
      letter-spacing: 2px;
    }

    body {
      overflow: overlay;
    }
    /* custom scrollbar */
   ::-webkit-scrollbar {
      width: 20px;
      height: 20px;
    }

    ::-webkit-scrollbar-track {
      background-color: transparent !important;
      -webkit-box-shadow: none;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #d6dee1;
      border-radius: 20px;
      border: 6px solid transparent;
      background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: #a8bbbf;
    }

    .display-none{
      display: none;
    }
  }