@media (min-width: 64em) {
  .container-bg-content {
    width: 100%;
    background-color: #e2e2e2;
  }

  .aboutus-section,
  .products-section,
  .news-updates-section {
    max-width: 144rem;
    margin: 0 auto;
  }

  .btn-border:hover::before {
    top: 0;
  }
  .btn-border:hover {
    color: #fff;
    border-color: #6fb85e;
  }

  .btn-fill:hover {
    color: #fff;
    background: #306da6;
  }
  /******** Hero Section *************/

  .hero-bg {
    display: none;
    visibility: hidden;
    opacity: 0;
  }

  .hero-bg-container {
    height: 100vh;
  }

  .hero-bg-desktop {
    display: unset;
    visibility: visible;
    opacity: 1;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
  }

  .hero-txt-bg-desktop-container {
    display: flex;
    flex-direction: column;
    visibility: visible;
    opacity: 1;
    /* z-index: 1; */
    position: fixed;
    bottom: 7.2rem;
    left: 50vw;
    transform: translateX(-50%);
  }

  .hero-txt-bg-desktop-container span {
    font-size: 6.4rem;
    text-align: center;
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;

    color: #0d0d0d;
  }

  .text-slide {
    opacity: 0;
    transform: translateY(100%);
    animation: slide-up 1.6s ease forwards;
    animation-delay: var(--delay);
    animation-timing-function: cubic-bezier(0.41, 0.01, 0, 1);
  }

  .text-slide:nth-child(1) {
    --delay: 0s;
  }

  .text-slide:nth-child(2) {
    --delay: 0.2s;
  }

  .text-slide:nth-child(3) {
    --delay: 0.4s;
  }

  @keyframes slide-up {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero-main-container {
    margin: 0;
    align-self: center;
  }

  .hero-bg-main-container {
    background-color: #e2e2e2;
    margin: 16rem 0 0 0;
  }

  .hero-main-img-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 102.4rem;
    margin: 0 auto;
  }

  .img-landing-container {
    position: relative;
  }

  .hero-header {
    line-height: 5.6rem;
  }

  .hero-txt {
    font-size: 2.4rem;
    line-height: 32px;
    max-width: 40rem;
  }

  /******** About Us Section *************/

  .aboutus-section {
    padding: 4.8rem 4.8rem 8.8rem 4.8rem;
  }

  .first-img-about-container {
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    column-gap: 2.8rem;

    margin-bottom: 4.8rem;
  }

  .aboutus-first-section {
    padding: 3.2rem 4rem;
    margin-bottom: 0px;
  }

  .aboutus-tagline-container {
    padding-bottom: 2.4rem;
  }

  .aboutus-tagline-container span {
    font-size: 6.4rem;
    padding-bottom: 0;
    height: 6rem;
  }

  .aboutus-first-txt {
    font-size: 1.6rem;
    max-width: 48rem;
  }

  .btn-about {
    margin-top: 3.2rem;
    width: 14.4rem;
  }

  .btn-about-en {
    width: 18rem;
    padding: 24px 20px;
  }

  .about-txt-btn {
    font-size: 1.6rem;
  }

  .img-about-div {
    grid-template-rows: 1fr 0.5fr;
    margin-bottom: 0;
    height: 100%;
  }
  .aboutus-second-txt-container,
  .about-lists-container {
    padding-left: 3.2rem;
  }

  .aboutus-second-txt-container {
    max-width: 62rem;
    padding-bottom: 5.6rem;
  }

  .about-lists-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    
    column-gap: 2.8rem;
    row-gap: 2.8rem;
    /*width: 100rem;*/
    align-items: center;
    justify-items: start;
  }

  .about-list-container {
    padding: 2rem 2.8rem;
    width: 40rem;
  }

  .contact-list-icon {
    height: 6.4rem;
  }

  .contact-list-txt {
    font-size: 2rem;
  }

  .experience-icon {
    height: 5.2rem;
  }

  /******** Our Products Section *************/

  .products-section {
    padding: 0 4.8rem 5.6rem 4.8rem;
  }

  .products-header-container-outer {
    display: flex;
    align-items: end;
    justify-content: space-between;

    margin-bottom: 4.8rem;
  }

  .our-products-btn-desktop {
    display: inline-flex;
    opacity: 1;
    visibility: visible;

    font-size: 1.6rem;
    color: rgba(0, 0, 0, 0.5);
    width: fit-content;
  }

  .products-category-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 4.8rem;
  }

  .each-products-container {
    border-bottom: none;
    display: flex;
    flex-direction: column;
  }

  .product-img-container {
    width: 100%;
    height: fit-content;
    margin-bottom: 0.8rem;
  }

  .product-txt-en,
  .product-txt-th {
    text-align: center;
  }

  .our-products-btn {
    display: none;
    opacity: 0;
    visibility: hidden;
  }

  /******** News&Updates Section *************/

  .news-updates-section {
    padding: 0 4.8rem 12rem 4.8rem;
  }

  .news-updates-heading-container {
    display: flex;
    align-items: end;
    justify-content: space-between;

    margin-bottom: 4.8rem;
  }

  .news-all-btn-desktop {
    display: inline-flex;
    opacity: 1;
    visibility: visible;

    font-size: 1.6rem;
    color: rgba(0, 0, 0, 0.5);
    width: fit-content;
  }

  .carousel-container {
    padding: 0;
  }

  .carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    column-gap: 1.2rem;
    width: 100%;
  }

  .carousel-item {
    width: 100%;
    height: unset;
    padding: 1rem 1rem 2rem 1rem;
  }

  .img-news-container {
    width: 100%;
    height: unset;
    margin-bottom: 2.4rem;
  }

  .carousel-indicators,
  .news-all-btn-container {
    display: none;
    visibility: hidden;
    opacity: 0;
  }

  .news-topic {
    height: 10.8rem;
  }
}

@media (min-width: 90em) {
  .btn-border,
  .btn-fill {
    width: 16rem;
    height: 5.6rem;
    font-size: 2rem;
  }

  .hero-txt-container {
    padding-bottom: 4.8rem;
  }

  .hero-header {
    line-height: 8rem;
    padding-bottom: 2.4rem;
  }

  .hero-txt-bg-desktop-container span {
    font-size: 9.6rem;
  }

  .hero-txt {
    font-size: 3.2rem;
    line-height: 4rem;
    max-width: 56rem;
  }

  .btn-about-en {
    width: 18rem;
  }

  .aboutus-tagline-container span {
    font-size: 8rem;
    height: 7.2rem;
  }

  .aboutus-tagline-container {
    padding-bottom: 4rem;
  }

  .aboutus-first-txt {
    font-size: 2rem;
    max-width: 72rem;
    line-height: 3.2rem;
  }

  .aboutus-second-txt-container {
    max-width: 120rem;
  }
  .aboutus-second-txt {
    font-size: 2rem;
    line-height: 3.2rem;
  }
  
  
  
  .aboutus-first-section {
    padding: 3.2rem 4.8rem;
  }
  
   .about-lists-container {
       width: 100rem;
  }
  
  .about-list-container {
    width: 48rem;
  }

  /*.img-about-div {*/
  /*  height: 49rem;*/
  /*}*/

  .our-products-btn-desktop {
    width: fit-content;
  }
  
  .product-txt-en {
      font-size: 2.4rem;
      padding-bottom: 0.4rem;
  }
  
  .product-txt-th {
    font-size: 1.6rem;
  }
}