/* 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;
    }
    .imgCard2{
      height: 85px;
      filter: brightness(0.98);
    }
    .fit2{
        display: block;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: top;
    }

    .text-sub{
      height: 45px;
      align-items: start;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .card-list{
      /* min-height: 530px; */
      /* overflow-x: scroll; */
      padding-bottom:0.75rem;
      width: 100%;
    }
    .card-outline{
      border-radius:5px !important;
      border: 1px solid #d6dee195;
      background-color: white;
      cursor: pointer;
      font-size: 0.95rem;
    
    }
    .card-outline:hover{
      color: #02A998;
      box-shadow: rgba(149, 157, 165, 0.15) 0px 5px 10px;
    }
    .card-detail{
      border: 1px solid rgba(51, 65, 85, 0.129);
      background-color: rgba(197, 209, 227, 0.064);
      border-radius: 5px;
    }
  }
