.blur-up {
  -webkit-filter: blur(15px);
  filter: blur(15px);
  transition: filter 400ms, -webkit-filter 400ms;
}

.blur-up.lazyloaded {
  -webkit-filter: blur(0);
  filter: blur(0);
}


@media (max-width: 991px) {
          /*.cover-as-bg-middle {
            width: 100%; 
            height: 36vh; 
            background-image: url('images/bigbanner_contact.jpg'); 
            background-size: cover;
            background-position: top center;
          }*/
      }
      @media (min-width: 992px) {
          .cover-as-bg-middle {
            width: 100%; /* Or any width you desire */
            height: 80vh; /* Or any height you desire */
            background-image: url('images/bigbanner_contact.jpg'); /* Replace 'your-image-url.jpg' with your actual image URL */
            background-size: cover;
            background-position: top left;
          }
        
      }

        .main-banner {
            /*background-image: url('images/bg-transparent.jpg');*/
            background-image: url('images/BG_1920.jpg');
            background-size: cover;
            /*background-attachment: fixed;*/
            height: 143px; /*15vh;*/ /* Adjust the height as needed */
            position: relative;
            z-index: 1; /* Ensure the element is above the background */
        }
        
        .kanit-thin {
        font-family: "Kanit", sans-serif;
        font-weight: 100;
        font-style: normal;
        }

        .kanit-extralight {
        font-family: "Kanit", sans-serif;
        font-weight: 200;
        font-style: normal;
        }

        .kanit-light {
        font-family: "Kanit", sans-serif;
        font-weight: 300;
        font-style: normal;
        }

        .kanit-regular {
        font-family: "Kanit", sans-serif;
        font-weight: 400;
        font-style: normal;
        }

        .kanit-medium {
        font-family: "Kanit", sans-serif;
        font-weight: 500;
        font-style: normal;
        }

        .kanit-semibold {
        font-family: "Kanit", sans-serif;
        font-weight: 600;
        font-style: normal;
        }

        .kanit-bold {
        font-family: "Kanit", sans-serif;
        font-weight: 700;
        font-style: normal;
        }

        .kanit-extrabold {
        font-family: "Kanit", sans-serif;
        font-weight: 800;
        font-style: normal;
        }

        .kanit-black {
        font-family: "Kanit", sans-serif;
        font-weight: 900;
        font-style: normal;
        }

        .kanit-thin-italic {
        font-family: "Kanit", sans-serif;
        font-weight: 100;
        font-style: italic;
        }

        .kanit-extralight-italic {
        font-family: "Kanit", sans-serif;
        font-weight: 200;
        font-style: italic;
        }

        .kanit-light-italic {
        font-family: "Kanit", sans-serif;
        font-weight: 300;
        font-style: italic;
        }

        .kanit-regular-italic {
        font-family: "Kanit", sans-serif;
        font-weight: 400;
        font-style: italic;
        }

        .kanit-medium-italic {
        font-family: "Kanit", sans-serif;
        font-weight: 500;
        font-style: italic;
        }

        .kanit-semibold-italic {
        font-family: "Kanit", sans-serif;
        font-weight: 600;
        font-style: italic;
        }

        .kanit-bold-italic {
        font-family: "Kanit", sans-serif;
        font-weight: 700;
        font-style: italic;
        }

        .kanit-extrabold-italic {
        font-family: "Kanit", sans-serif;
        font-weight: 800;
        font-style: italic;
        }

        .kanit-black-italic {
        font-family: "Kanit", sans-serif;
        font-weight: 900;
        font-style: italic;
        }

        .carousel {
          background: #FAFAFA;
        }

        .carousel-cell {
          width: 100%;
          height: 80vh;
          margin-right: 0;
          background: #333;
        }

        /*.carousel-cell-image {
          display: block;
          max-height: 100%;
          margin: 0 auto;
          max-width: 100%;
          opacity: 0;
          -webkit-transition: opacity 0.4s;
                  transition: opacity 0.4s;
        }*/

        /* fade in lazy loaded image */
        .carousel-cell-image.flickity-lazyloaded,
        .carousel-cell-image.flickity-lazyerror {
          opacity: 1;
        }

        /* position dots in carousel */
        .flickity-page-dots {
          bottom: 48px;
        }
        /* white circles */
        .flickity-page-dots .dot {
          width: 12px;
          height: 12px;
          opacity: 1;
          margin: 0 4px;
          background: #ffffff;
          border: 2px solid white;
          border-radius: 0;
        }
        /* fill-in selected dot */
        .flickity-page-dots .dot.is-selected {
          background: white;
          width: 20px;
          height: 20px;
          border-radius: 0;
          opacity: 1;
        }

        
        /* position dots in carousel */
        

        /* smaller, dark, rounded square */
        .flickity-button {
          background: #333;
        }
        .flickity-button:hover {
          background: #F90;
        }

        .flickity-prev-next-button {
          width: 42px;
          height: 42px;
          border-radius: 21px;
        }
        /* icon color */
        .flickity-button-icon {
          fill: white;
        }
        /* position outside */
        /*.flickity-prev-next-button.previous {
          left: -40px;
        }
        .flickity-prev-next-button.next {
          right: -40px;
        }*/



        .img-container {
          position: relative;
          width: 100%; /* Set the width and height of the container */
          height: 80vh;
          overflow: hidden; /* Hide any overflow */
        }

        .img-container img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: bottom; /* Align the image to the bottom */
          /*transform: translateY(5%);*/ /* Translate the image up by 50% of its height */
        }

       

        /* Extra small devices (portrait phones, less than 576px)*/
        @media (max-width: 575.98px) {
          .main-menu-btn {
            display: none;
          }
          
        }

        /* Small devices (landscape phones, 576px and up)*/
        @media (min-width: 576px) and (max-width: 767.98px) {
          .main-menu-btn {
            display: none;
          }
          
        }

        /* Medium devices (tablets, 768px and up)*/
        @media (min-width: 768px) and (max-width: 991.98px) {
          .main-menu-btn {
            display: none;
          }
        }

        /* Large devices (desktops, 992px and up)*/
        @media (min-width: 992px) and (max-width: 1199.98px) {
          .main-menu-btn {
            display: inline;
          }
        }

        /* Extra large devices (large desktops, 1200px and up)*/
        @media (min-width: 1200px) {
          .main-menu-btn {
            display: inline;
          }
        }