.dev-colors {
      background: rgb(30, 56, 110);
      color: rgb(255, 255, 255);
      background: linear-gradient(265deg, #ff074a, #f35a00de 50%);
  }

  .nav-link {
      color: rgb(255, 255, 255);
  }

  .nav-item>a:hover {
      color: rgb(255, 255, 255);
  }

  .navbar-nav a {
      font-size: 18px;
      margin: 0 10px;
  }

  .navbar-nav>.active>a {
      background-color: #71abee;
      border-radius: 20px;
      color: rgb(255, 255, 255);
  }

  .banner-img {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      overflow: hidden;
      position: relative;
  }

  .img-container {
      width: 100%;
      height: auto;
  }

  .img-scale {
      display: block;
      width: 100%;
      height: auto;
  }

  @media (max-width: 430px),
  (max-width: 768px),
  (min-width: 769px) and (max-width: 999px) {
      .banner-img {
          margin: 0 auto;
      }
  }

  li a {
      text-align: center;
  }

  /* Additional styles for the page */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: 'Kanit', sans-serif;
      font-size: 16px;
      color: #ffffff;
      text-rendering: optimizeLegibility;
      font-weight: initial;
  }

  .container-job {
      max-width: 100%;
      width: 97%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      flex-wrap: wrap;
  }

  .section-one,
  .section-two {
      margin: 2.5rem 0;
      text-align: center;
  }

  .img-one,
  .img-two {
      max-width: 100%;
      height: auto;
  }

  .img-left,
  .img-left-two {
      width: 100%;
      height: auto;
  }

  .text-one,
  .text-two {
      padding: 0 20px;
  }

  .title-job {
      margin: 1rem 0;
      text-align: center;
      font-size: 2rem;
      font-size: 40px;
      border-radius: 20px;
      background: rgb(30, 56, 110);
      background: linear-gradient(-80deg, rgb(247 109 7), #ff0000b3 50%);
      color: white;
  }

  .discription p {
      color: black;
  }

  .discription,
  .job-positon {
      font-size: 3.8vh;
      max-width: 100%;
  }

  .job-positon ul {
      list-style-type: none;
      padding-left: 0;
      font-size: 50px;
  }

  .job-head-li {
      text-align: center;
      color: black;
  }

  .job-head {
      border-radius: 20px;
      background: rgb(30, 56, 110);
      background: linear-gradient(-80deg, rgb(247 109 7), #e10202b8 50%);
      color: white;
      font-size: 40px;
      text-align: center;
  }

  .clickable-card {
      cursor: pointer;
  }

  .container-contract-home {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
      color: white;
      background: linear-gradient(265deg, #ff074a, #f35a00de 50%);
      justify-content: space-evenly;
      text-align: center;
  }

  .contract-tel,
  .contract-email,
  .contract-line,
  .contract-facebook {
      font-size: 20px;
  }

  .contract-tel i,
  .contract-email i,
  .contract-line i,
  .contract-facebook i {
      margin: 10px;
  }

  .contract-title {
      display: flex;
      justify-content: center;
      font-size: 50px;
      margin-top: 60px;
      color: black;
  }

  .card-flex {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: linear-gradient(-80deg, rgb(247 109 7), #ff0000b3 50%);
  }

  .card-bg-tel {
      text-align: center;
      background-color: rgb(255 200 0);
      color: white;
      width: 250px;
      height: 230px;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      margin: 20px auto;
  }

  .card-bg-fb {
      text-align: center;
      background-color: rgb(56, 74, 134);
      color: white;
      width: 250px;
      height: 230px;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      margin: 20px auto;
  }

  .card-bg-line {
      text-align: center;
      background-color: #06c755;
      color: white;
      width: 250px;
      height: 230px;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      margin: 20px auto;
  }

  .icon-tel {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
  }

  .icon-tel i {
      font-size: 60px;
  }

  .card-body-tel,
  .card-body-fb,
  .card-body-line {
      margin-top: 20px;
      text-align: center;
  }

  .click-map-kku {
      position: absolute;
      color: #121212;
      top: 61%;
      left: 5%;
      width: 318px;
      height: 152px;
      text-align: center;
      cursor: pointer;
      transition: background-color 0.3s;
  }

  .click-map-korat {
      position: absolute;
      color: #121212;
      top: 63%;
      left: 23%;
      width: 385px;
      height: 141px;
      text-align: center;
      cursor: pointer;
      transition: background-color 0.3s;
  }

  .click-map-kku:hover {
      border-radius: 20px;
      background-color: rgb(255, 86, 5, 0.3);
  }

  .click-map-korat:hover {
      border-radius: 20px;
      background-color: rgb(255, 86, 5, 0.3);
  }

  .dev-colors {
      background: rgb(30, 56, 110);
      color: rgb(255, 255, 255);
      background: linear-gradient(265deg, #ff074a, #f35a00de 50%);
  }


  .nav-link {
      color: rgb(255, 255, 255);
  }

  .nav-item>a:hover {
      color: rgb(255, 255, 255);
  }

  .navbar-nav a {
      font-size: 18px;
      margin: 0 10px;
  }


  .navbar-nav>.active>a {
      background-color: #71abee;
      border-radius: 20px;

      color: rgb(255, 255, 255);
  }

  .banner-img {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      overflow: hidden;
      position: relative;

  }

  .img-container {
      width: 100%;
      height: auto;
  }

  .img-scale {
      display: block;
      width: 100%;
      height: auto;
  }

  @media (max-width: 430px) {
      .banner-img {

          margin: 0 auto;
      }
  }

  @media (max-width: 768px) {
      .banner-img {

          margin: 0 auto;
      }
  }

  @media (min-width: 769px) and (max-width: 999px) {
      .banner-img {

          margin: 0 auto;
      }
  }

  li a {
      text-align: center;
  }

  /* //----ของใคร---// */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  /* body {} */

  .container-job {
      max-width: 100%;
      width: 97%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      flex-wrap: wrap;
  }

  .section-one,
  .section-two {
      margin: 2.5rem 0;
      text-align: center;
  }

  .img-one,
  .img-two {
      max-width: 100%;
      height: auto;
  }

  .img-left,
  .img-left-two {
      width: 100%;
      height: auto;
  }

  .text-one,
  .text-two {
      padding: 0 20px;
  }


  .title-job {
      margin: 1rem 0;
      text-align: center;
      font-size: 2rem;
      font-size: 40px;
      border-radius: 20px;
      background: rgb(30, 56, 110);
      background: linear-gradient(-80deg, rgb(247 109 7), #ff0000b3 50%);
      color: white;
  }

  .discription p {
      color: black;
  }

  .discription,
  .job-positon {
      font-size: 3.8vh;
      max-width: 100%;
  }

  .job-positon ul {
      list-style-type: none;
      padding-left: 0;
      font-size: 50px;

  }

  @media (max-width: 820px) {

      .discription,
      .job-positon {
          font-size: 1.8vh;

      }

      .job-positon ul {
          font-size: 40px;
      }

      .title-job {
          font-size: 1.5rem;
      }
  }


  @media (max-width: 768px) {

      .discription,
      .job-positon {
          font-size: 1.8vh;

      }

      .job-positon ul {
          font-size: 40px;
      }

      .title-job {
          font-size: 1.5rem;
      }
  }

  @media (max-width: 480px) {

      .discription,
      .job-positon {
          font-size: 1.8vh;

      }

      .job-positon ul {
          font-size: 30px;
      }

      .job-positon ul li {

          text-align: center;
          font-size: 20px;
      }

      .title-job {
          font-size: 1.25rem;


      }

  }

  @media (max-width: 430px) {

      .discription,
      .job-positon {
          font-size: 1.8vh;

      }

      .job-positon ul {
          font-size: 30px;
      }

      .job-positon ul li {

          text-align: center;
          font-size: 20px;
      }

      .title-job {
          font-size: 1.25rem;


      }

  }


  .card-flex {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: linear-gradient(-80deg, rgb(247 109 7), #ff0000b3 50%);
  }

  .contract-title {
      display: flex;
      justify-content: center;
      font-size: 50px;
      margin-top: 60px;
      color: black;

  }

  .card-bg-tel {

      text-align: center;
      background-color: rgb(255 200 0);
      color: white;
      width: 250px;
      height: 230px;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      margin: 20px auto;
  }

  .card-bg-fb {
      text-align: center;
      background-color: rgb(56, 74, 134);
      color: white;
      width: 250px;
      height: 230px;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      margin: 20px auto;
  }

  .card-bg-line {
      text-align: center;
      background-color: #06c755;
      color: white;
      width: 250px;
      height: 230px;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      margin: 20px auto;
  }

  .card-body-contract {
      width: 250px;
      height: 130px;
      margin-top: 20px;
      text-align: center;

  }



  .icon-tel {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
  }

  .icon-tel i {
      font-size: 60px;

  }

  .bg-style {
      display: flex;
      justify-content: center;
      padding: 14px;
      margin-top: 40px;
      background: linear-gradient(-80deg, rgb(247 109 7), #ff0000b3 50%);
  }

  .title-shop {

      color: white;
      font-size: 50px;

  }

  .search-flex {
      display: flex;
      justify-content: space-around;
      margin-top: 30px;
      margin-bottom: 30px;


  }

  .logo {
      margin-top: 5px;
      margin-left: 30px;
  }


  .dev-search {
      width: 450px;
      margin-right: 40px;
  }

  .container {
      display: flex;
      justify-content: center;
  }

  .row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      align-items: center;
      max-width: 100%;
  }

  .card-shop {
      max-width: 100%;
      margin: 20px auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      transition: transform 0.3s, background-color 0.3s;
  }

  .card-shop:hover {
      transform: scale(1.05);
      /* ขยายใหญ่ขึ้นเมื่อ hover */
      background-color: #b6caf7;
      /* เปลี่ยนสีพื้นหลังเมื่อ hover */
  }

  .card-shop img {
      width: 100%;
      height: auto;
  }

  .card-body {

      margin-top: 20px;
      text-align: center;
  }


  .card-body-tel {

      margin-top: 20px;
      text-align: center;
  }

  .card-body-fb {

      margin-top: 20px;
      text-align: center;
  }

  .card-body-line {

      margin-top: 20px;
      text-align: center;
  }


  .card-title {
      background: rgb(0, 96, 173);
      background: linear-gradient(-80deg, rgb(247 109 7), #9d167a8f 50%);
      color: white;
      border-radius: 10px;
      padding: 10px;
  }



  .fb-page {
      width: 550px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  .job-head-li {
      text-align: center;
      color: black;
  }

  .job-head {
      border-radius: 20px;
      background: rgb(30, 56, 110);
      background: linear-gradient(-80deg, rgb(247 109 7), #e10202b8 50%);
      color: white;
      font-size: 40px;
      text-align: center;
  }

  @media (max-width: 820px) {

      .job-head {
          font-size: 25px;
      }

  }

  @media (max-width: 480px) {
      .job-head {
          font-size: 25px;
      }
  }

  .clickable-card {
      cursor: pointer;
  }

  .container-contract-home {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
      color: white;
      background: linear-gradient(265deg, #ff074a, #f35a00de 50%);
      justify-content: space-evenly;
      text-align: center;

  }

  .contract-tel,
  .contract-email,
  .contract-line,
  .contract-facebook {



      font-size: 20px;
  }



  .contract-tel i,
  .contract-email i,
  .contract-line i,
  .contract-facebook i {
      margin: 10px;
  }

  .click-map-kku {
      position: absolute;
      color: #121212;
      top: 61%;
      left: 5%;
      width: 318px;
      /* height: 170px; */
      height: 152px;
      text-align: center;
      cursor: pointer;
      transition: background-color 0.3s;

  }

  .click-map-korat {

      position: absolute;
      color: #121212;
      top: 63%;
      left: 23%;
      width: 385px;
      height: 141px;
      text-align: center;
      cursor: pointer;
      transition: background-color 0.3s;
  }

  .click-map-kku:hover {
      border-radius: 20px;
      background-color: rgb(255, 86, 5, 0.3);

  }

  .click-map-korat:hover {
      border-radius: 20px;
      background-color: rgb(255, 86, 5, 0.3);

  }

  @media only screen and (max-width: 390px) {
      .click-map-kku {


          width: 63px;
          height: 28px;

      }

      .click-map-korat {



          width: 87px;
          height: 58px;

      }




  }

  @media only screen and (max-width: 390px) and (max-width: 430px) {

      .contract-tel,
      .contract-email,
      .contract-line,
      .contract-facebook {
          margin-top: 10px;
          font-size: 0.9vh;
      }



      .contract-tel i,
      .contract-email i,
      .contract-line i,
      .contract-facebook i {
          margin: 10px;
      }

      .click-map-kku {


          width: 63px;
          height: 28px;

      }

      .click-map-korat {



          width: 87px;
          height: 28px;

      }




  }


  @media only screen and (min-width: 999px) and (max-width: 1024px) {
      .click-map-kku {

          width: 133px;
          height: 101px;
      }

      .click-map-korat {

          width: 133px;
          height: 101px;
      }
  }

  @media only screen and (min-width: 768px) and (max-width: 820px) {
      .click-map-kku {

          width: 115px;
          height: 85px;
      }

      .click-map-korat {

          width: 133px;
          height: 80px;
      }
  }

  @media only screen and (min-width: 1509px) and (max-width: 1600px) {
      .click-map-kku {

          width: 260px;
      }

      .click-map-korat {

          width: 309px;
      }
  }

  @media only screen and (min-width:1366px) and (max-width: 1400px) {
      .click-map-kku {

          width: 260px;
      }

      .click-map-korat {

          width: 309px;
      }
  }


  .tag-animation {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1.5s ease, transform 1.5s ease;
  }

  .tag-animation.active {
      opacity: 1;
      transform: translateY(0);
  }

  /* facebook Page */
  .facebook-section {

      /* margin-top: 40px; */
      /* margin-bottom: 40px; */
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      /* background: linear-gradient(-80deg, rgb(247 109 7), #ff0047b3 50%); */
      /* margin-bottom: 74px; */

  }

  .facebook-section p {
      font-size: 30px;
      color: rgb(0, 0, 0);
  }

  .fb-page {
      max-width: 500px;
      width: 95%;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  .myimages {
      display: flex;
      overflow: hidden;
      height: 20vw;
      background: white;
      margin-top: 40px;
      margin-bottom: 40px;
  }

  .myimages img {
      max-width: 100%;
      vertical-align: middle;
      border: 2px solid white;
      box-sizing: border-box;
      transition: opacity .2s;
  }

  .myimages:hover img {
      opacity: 0.5;
  }

  .myimages img:hover {
      opacity: 1;
  }

  .first-column {
      animation: var(--animation, none) 16s infinite linear;
  }

  .first-column:hover {
      animation-play-state: paused;
  }

  .first-column:nth-of-type(odd) {
      align-self: flex-end;
      --direction: 50%;
  }

  @keyframes slide {
      to {
          -webkit-transform: translateY(var(--direction, -50%));
          transform: translateY(var(--direction, -50%));
      }
  }

  @media (max-width: 480px) {
      .myimages {
          display: flex;
          overflow: hidden;
          height: 65vw;
          background: white;
          margin-top: 40px;
          margin-bottom: 40px;
          max-width: 100%;
      }
  }

  #imageModal .modal-body {
      text-align: center;
  }

  #imageModal .modal-body img {
      max-width: 100%;
      max-height: 80vh;

  }

  .card-shop img {
      width: 100%;
      height: 270px;
  }

  @media (max-width: 820px) {
      .card-shop img {

          height: 140px;
      }
  }

  @media (max-width: 768px) {
      .card-shop img {
          height: 192px;
      }
  }

  @media (max-width: 430px) {
      .card-shop img {

          height: 200px;
      }
  }




  /**card */
  /* This pen */
  body {
      font-family: 'Kanit', sans-serif;
      font-size: 16px;
      color: #ffffff;
      text-rendering: optimizeLegibility;
      font-weight: initial;
  }

  .dark {
      background: linear-gradient(117deg, rgb(206 206 207) 15%, rgb(231 231 231) 50%, rgb(191 191 191) 83%);
  }


  .light {
      background: #f3f5f7;
  }

  a,
  a:hover {
      text-decoration: none;
      transition: color 0.3s ease-in-out;
  }

  #pageHeaderTitle {
      margin: 2rem 0;
      text-transform: uppercase;
      text-align: center;
      font-size: 2.5rem;
  }

  /* Cards */
  .postcard {
      flex-wrap: wrap;
      display: flex;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
      border-radius: 10px;
      margin: 0 0 2rem 0;
      overflow: hidden;
      position: relative;
      color: #ffffff;
      max-width: 980px;
      width: 90%;
      height: 384px;


  }

  .postcard.dark {
      background-color: #313a53;
  }

  .postcard.light {
      background-color: #e1e5ea;
  }

  .postcard.t-dark {
      color: #18151f;
  }

  .postcard a {
      color: inherit;
  }

  .postcard h1,
  .postcard .h1 {
      margin-bottom: 0.5rem;
      font-weight: 500;
      line-height: 1.2;
  }

  .postcard .small {
      font-size: 80%;
  }

  .postcard .postcard__title {
      font-size: 1.75rem;
  }

  .postcard .postcard__img {
      max-height: 200px;
      width: 100%;
      object-fit: cover;
      position: relative;
  }

  .postcard .postcard__img_link {
      display: contents;
  }

  .postcard .postcard__bar {
      width: 50px;
      height: 10px;
      margin: 10px 0;
      border-radius: 5px;
      background-color: #424242;
      transition: width 0.2s ease;
  }

  .postcard .postcard__text {
      padding: 1.5rem;
      position: relative;
      display: flex;
      flex-direction: column;
  }

  .postcard .postcard__preview-txt {
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: justify;
      height: 100%;
  }

  .postcard .postcard__tagbox {
      display: flex;
      flex-flow: row wrap;
      font-size: 14px;
      margin: 20px 0 0 0;
      padding: 0;
      justify-content: center;
  }

  .postcard .postcard .tag__item {
      display: inline-block;
      background: rgba(83, 83, 83, 0.4);
      border-radius: 3px;
      padding: 2.5px 10px;
      margin: 0 5px 5px 0;
      cursor: default;
      user-select: none;
      transition: background-color 0.3s;
  }

  .postcard .postcard .tag__item:hover {
      background: rgba(83, 83, 83, 0.8);
  }

  .postcard:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-image: linear-gradient(-80deg, rgb(247 109 7), #9d167a8f 50%);
      opacity: 1;
      border-radius: 10px;
  }

  .postcard:hover .postcard__bar {
      width: 100px;
  }

  @media screen and (min-width: 769px) {
      .postcard {
          flex-wrap: inherit;
      }

      .postcard .postcard__title {
          font-size: 2rem;
      }

      .postcard .postcard__tagbox {
          justify-content: start;
      }

      .postcard .postcard__img {
          max-width: 314px;
          max-height: 100%;
          transition: transform 0.3s ease;
      }

      .postcard .postcard__text {
          padding: 4rem;
          width: 100%;
      }

      .postcard .postcard__text:before {
          content: "";
          position: absolute;
          display: block;
          background: #dce9ff;
          top: -20%;
          height: 130%;
          width: 55px;
      }

      .postcard:hover .postcard__img {
          transform: scale(1.1);
      }

      .postcard:nth-child(2n+1) {
          flex-direction: row;
      }

      .postcard:nth-child(2n+0) {
          flex-direction: row-reverse;
      }

      .postcard:nth-child(2n+1) .postcard__text:before {
          left: -12px !important;
          transform: rotate(4deg);
      }

      .postcard:nth-child(2n+0) .postcard__text:before {
          right: -12px !important;
          transform: rotate(-4deg);
      }
  }

  @media screen and (min-width: 1024px) {
      .postcard .postcard__text {
          padding: 8rem 3.5rem;
      }

      .postcard.dark .postcard__text:before {
          background: #dce9ff;
      }

      .postcard.light .postcard__text:before {
          background: #dce9ff;
      }
  }

  /* COLORS */
  .postcard .postcard .postcard__tagbox .green.play:hover {
      background: #00f3ff;
      color: black;
  }

  .green .postcard__title:hover {
      color: #00f3ff;
  }

  .green .postcard__bar {
      background-color: #00f3ff;
  }

  .green:before {
      background-image: linear-gradient(-30deg, rgba(121, 221, 9, 0.1), transparent 50%);
  }

  .green:nth-child(2n)::before {
      background-image: linear-gradient(30deg, rgba(121, 221, 9, 0.1), transparent 50%);
  }

  .postcard .postcard .postcard__tagbox .blue.play:hover {
      background: #0076bd;
  }

  .blue .postcard__title:hover {
      color: #0076bd;
  }

  .blue .postcard__bar {
      background-color: #0076bd;
  }

  .blue:before {
      background-image: linear-gradient(-30deg, rgba(0, 118, 189, 0.1), transparent 50%);
  }

  .blue:nth-child(2n)::before {
      background-image: linear-gradient(30deg, rgba(0, 118, 189, 0.1), transparent 50%);
  }

  .postcard .postcard .postcard__tagbox .red.play:hover {
      background: #92e6ff;
  }

  .red .postcard__title:hover {
      color: #92e6ff;
  }

  .red .postcard__bar {
      background-color: #92e6ff;
  }

  .red:before {
      background: linear-gradient(-80deg, rgb(247 109 7), #ff0000b3 50%);
  }

  .red:nth-child(2n)::before {
      background-image: linear-gradient(30deg, rgba(189, 21, 11, 0.1), transparent 50%);
  }

  .postcard .postcard .postcard__tagbox .yellow.play:hover {
      background: #92e6ff;
      color: black;
  }

  .yellow .postcard__title:hover {
      color: #bdbb49;
  }

  .yellow .postcard__bar {
      background-color: #bdbb49;
  }

  .yellow:before {
      background-image: linear-gradient(-30deg, rgba(189, 187, 73, 0.1), transparent 50%);
  }

  .yellow:nth-child(2n)::before {
      background-image: linear-gradient(30deg, rgba(189, 187, 73, 0.1), transparent 50%);
  }

  @media screen and (min-width: 769px) {
      .green:before {
          background-image: linear-gradient(-80deg, rgba(121, 221, 9, 0.1), transparent 50%);
      }

      .green:nth-child(2n)::before {
          background-image: linear-gradient(80deg, rgba(121, 221, 9, 0.1), transparent 50%);
      }

      .blue:before {
          background-image: linear-gradient(-80deg, rgba(0, 118, 189, 0.1), transparent 50%);
      }

      .blue:nth-child(2n)::before {
          background-image: linear-gradient(80deg, rgba(0, 118, 189, 0.1), transparent 50%);
      }

      .red:before {
          background: linear-gradient(-80deg, rgb(247 109 7), #ff0000b3 50%);
      }

      .red:nth-child(2n)::before {
          background: linear-gradient(-80deg, rgb(247 109 7), #9d167a8f 50%);
      }

      .yellow:before {
          background: linear-gradient(-80deg, rgb(247 109 7), #9d167a8f 50%);
      }

      .yellow:nth-child(2n)::before {
          background: linear-gradient(-80deg, rgb(247 109 7), #9d167a8f 50%);
      }

      .btn-del {
          width: 95px;
      }


  }