* {
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
   font-family: "kanit_r", sans-serif;
}

div,
img {
   -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
   /* Safari */
   -khtml-user-select: none;
   /* Konqueror HTML */
   -moz-user-select: none;
   /* Old versions of Firefox */
   -ms-user-select: none;
   /* Internet Explorer/Edge */
   user-select: none;
   /* supported by Chrome, Edge, Opera and Firefox */
}
.card-title {
   margin-bottom: 0rem;
}
.swiper-slide .slider1 {
   text-align: center;
   font-size: 18px;
   background: #fff;

   /* Center slide text vertically */
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
}

.swiper {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}

.swiper-slide .slider1 {
   background-size: cover;
   background-position: center;
}

.swiper-video {
   height: fit-content;
}

.mySwiper3-1 {
   height: unset;
   width: 100%;
   border-radius: 0.375rem;
}

.mySwiper3-2 {
   box-sizing: border-box;
   padding: 1.5rem 0 0 0;
}

.mySwiper3-2 .swiper-slide {
   width: 25%;
   opacity: 0.4;
}

.mySwiper3-2 .swiper-slide-thumb-active {
   opacity: 1;
}

.mySwiper4-2 {
   box-sizing: border-box;
   padding: 1.5rem 0 0 0;
}

.mySwiper4-2 .swiper-slide {
   width: 25%;
   opacity: 0.4;
}

.mySwiper4-2 .swiper-slide-thumb-active {
   opacity: 1;
}

.modal-text {
   padding: 2rem;
}

.button-modal {
   background-color: black;
   color: white;
   text-decoration: none;
   display: flex;
   font-size: 21px;
   padding: 15px;
   border-radius: 0.375rem;
   justify-content: center;
   align-items: center;
}

.button-modal:hover {
   color: white;
   cursor: pointer;
}

.icon {
   display: flex;
   width: 36px;
   font-size: 17px;
   color: aliceblue;
   line-height: 33px;
   margin-right: 10px;
   height: 35px;
   border-radius: 50px;
   background: #dc3545;
   justify-content: center;
}

.card-body {
   flex: 1 1 auto;
   padding: 0rem 1rem 0rem 0;
   color: var(--bs-card-color);
}

.modal-icon {
   display: flex;
   align-items: center;
}

.subtitle-modal {
   color: gray;
}

.close-modal {
   height: 40px;
   width: 40px;
   z-index: 2;
   display: flex;
   left: 98%;
   border-radius: 50px;
   top: -2%;
   background-color: #ffffff;
   box-shadow: 0px 0px 10px 0px #00000056;
   position: absolute;
   justify-content: center;
   flex-wrap: wrap;
   flex-direction: row;
   align-items: center;
}

.modal-body {
   padding: 0;
}
.modal-dialog {
   width: 100%;
}

.card {
   border: none;
   background-color: transparent;
}

#wrapper {
   width: 100%;
   height: 100vh;
   background: #161616;
   display: flex;
   align-items: center;
   justify-content: center;
}

.cursor {
   text-align: center;
   position: absolute;
   background: white;
   width: 80px;
   height: 80px;
   border-radius: 100%;
   z-index: 10000;
   transform: scale(0);
   transition: 0.3s ease-in-out transform, 0.2s ease-in-out opacity;
   -webkit-box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.1);
   box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.1);
   user-select: none;
   pointer-events: none;
}

.wait {
   cursor: none;
   overflow: hidden;
}

.cursor::before {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 100%;
   opacity: 0;
}

.cursor.active {
   opacity: 1;
   transform: scale(1);
}

.cursor.active::before {
   opacity: 1;
}

.portfolio-thumb {
   overflow: hidden;
   transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
}

.portfolio-thumb img {
   max-width: 360px;
   opacity: 0.4;
   transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
   transform-origin: 90% center;
   cursor: none;
   overflow: hidden;
}

.portfolio-item:hover .portfolio-thumb {
   transform: translateX(-1.75rem);
}

.portfolio-item:hover .portfolio-thumb img {
   opacity: 0.8;
   transform: scale(1.2);
}

/*-------------------*/
/*-----SLIDER------*/
/*-------------------*/
.swiper-pagination-bullet-active {
   background-color: #d50032 !important;
   opacity: 1 !important;
}
.slideshow-container {
   padding-top: 10rem;
   background-color: white;
}
.slideshow-container.darkmode {
   background-color: #000000;
}

.about-intro {
   background-color: white;
}
.about-intro.darkmode {
   background-color: #000000;
}
.text-start {
   padding-top: 4rem;
   background-color: white;
}
.text-start.darkmode {
   background-color: black;
}
.servicesMainVideo {
   border-radius: 0 !important;
   z-index: 4;
}
.about-statusBg {
   box-shadow: 300px -300px 0px 300px #d50032;
   background-color: #d50032;
   z-index: 1;
   color: white;
   padding: 2rem;
}

.about-title {
   padding-bottom: 25px;
   font-size: 2rem;
   margin-bottom: 0;
}

.slider1Container {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   padding: 55px 0px;
   background-color: #fff;
}

.slider1 {
   display: block;
   transition: all 0.3s ease-in-out;
   cursor: none;
}

.slider1 img {
   border-radius: 0.5rem;
   transform: scale(1.006);
   cursor: none;
   display: block;
   width: 100%;
   object-fit: cover;
}

.slider1:hover img {
   border-radius: 0.375rem;
}

.slider1:hover {
   border-radius: 0.375rem;
   margin-right: 15px;
   box-shadow: 0 20px 25px rgb(0 0 0 / 16%);
   transform: scale(1.05) translate(0, -20px);
   transition: all 0.3s ease-in-out;
}

.clip {
   border-radius: 0.5rem;
   width: inherit;
   height: inherit;
   cursor: none;
   transition: all 0.3s ease-in-out;
}

.clip:hover {
   border-radius: 0.375rem;
   transition: all 0.3s ease-in-out;
}

.slider3 img {
   border-radius: 0.375rem;
   width: inherit;
}

.box {
   display: flex;
   width: inherit;
   height: inherit;
}

.box:hover img {
   filter: grayscale(0);
   opacity: 0;
   transition: all 0.3s ease-in-out;
}

.container.box video {
   position: absolute;
   top: 0;
   left: 0;
   width: 10%;
   height: 100%;
   object-fit: cover;
}

.vidcover {
   position: absolute;
   opacity: 1;
   transition: all 0.3s ease-in-out;
   width: inherit;
   height: inherit;
}

.swiper-button-prev {
   font-size: 4rem;
   height: 85%;
   width: 7%;
   left: 0px;
   top: 12%;
   color: rgba(255, 255, 255, 0.5);
   transition: all 0.2s ease-in-out;
}

.swiper-button-prev:hover {
   transform: scale(1.3);
   color: white;
   filter: drop-shadow(0px 0px 15px #0000001d);
}

.swiper-button-next {
   font-size: 4rem;
   height: 86%;
   width: 7%;
   right: 0px;
   top: 11%;
   color: rgba(255, 255, 255, 0.5);
   transition: all 0.2s ease-in-out;
}

.swiper-button-next:hover {
   transform: scale(1.3);
   color: white;
   filter: drop-shadow(0px 0px 15px #0000001d);
}
.swiper-button-prev-rental {
   position: absolute;
   display: flex;
   align-items: center;
   z-index: 2;
   font-size: 4rem;
   height: 85%;
   width: 7%;
   left: 3%;
   top: 12%;
   color: rgba(255, 255, 255, 0.75);
   transition: all 0.2s ease-in-out;
}

.swiper-button-prev-rental:hover {
   transform: scale(1.3);
   color: white;
   filter: drop-shadow(0px 0px 15px #0000001d);
}

.swiper-button-next-rental {
   position: absolute;
   display: flex;
   align-items: center;
   z-index: 2;
   font-size: 4rem;
   height: 86%;
   width: 7%;
   right: 4%;
   top: 11%;
   color: rgba(255, 255, 255, 0.75);
   transition: all 0.2s ease-in-out;
}

.swiper-button-next-rental:hover {
   transform: scale(1.3);
   color: white;
   filter: drop-shadow(0px 0px 15px #0000001d);
}

:focus-visible {
   outline: none !important;
}
.team-container {
   padding: 12rem 0rem;
   background: rgb(255, 255, 255);
   background: linear-gradient(0deg, rgba(255, 255, 255, 1) 13%, rgba(0, 0, 0, 0) 18%, rgba(36, 36, 36, 0) 75%, rgba(255, 255, 255, 1) 85%);
}

.team-swiper {
   height: 50vh;
   z-index: -1;
   cursor: grab;
   padding-top: 2rem;
}

.team-img {
   width: 56%;
   z-index: -1;
}

.mySwiperTeam {
   width: 100%;
   height: inherit;
   margin: 0 auto;
}

.swiper-slide-active .opacity-control {
   opacity: 1 !important;
}

.swiper-slide .opacity-control {
   opacity: 0;
   transition: opacity 0.2s ease-out;
}

.swiper-pagination-vertical.swiper-pagination-bullets {
   transform: unset;
}

.opacity-control {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.opacity-control h3 {
   padding-top: 1rem;
}

.opacity-control h4 {
   font-weight: 400;
   color: #636363;
   font-size: 1.25rem;
   line-height: 0.75;
}

h2.swiper-pagination-bullet {
   position: relative;
   font-size: 3.5rem;
   font-weight: 400;
   white-space: nowrap;
   display: flex !important;
   z-index: 2;
   height: 3.5rem !important;
   width: 100%;
   mix-blend-mode: exclusion;
   color: rgb(35, 35, 35);
   opacity: 1;
   background: rgba(0, 0, 0, 0) !important;
}
.swiper-pagination-custom.darkmode {
   filter: invert(1) hue-rotate(194deg) saturate(5.5) contrast(2);
   mix-blend-mode: exclusion;
}

h2.swiper-pagination-bullet-active {
   color: #d50032;
   mix-blend-mode: darken;
}

.footerImg-container {
   padding: 2rem 0rem;
   background-color: #fff;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
}

.footerImg-container img {
   width: 90%;
   box-shadow: 400px -250px 0px -100px #ffffff, -600px 500px 0px 0px #ffffff, 50px 50px 0px -10px #d50032, -50px -50px 0px -10px #d50032, 50px 50px 0px -10px #d50032;
}

.footer-mail {
   padding-top: 8rem;
}

.footer-mail h2 {
   text-align: center;
   line-height: 1.5rem;
   padding: 0rem 4rem;
   font-size: 1.5rem;
}
.modal-icon > lord-icon {
   width: 3.5rem !important;
   height: 3.5rem !important;
   margin-right: 0.75rem;
}

.slider-team > .swiper-slide-active {
   transform: translateZ(0) !important;
   transition: all 0.1s ease-in-out 0s !important;
}
.slider-team > .swiper-slide {
   transform: translateZ(0) scale(0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   transition: all 0.2s ease-in-out 1s;
}
.cursor.darkmode {
   background-color: #000;
}
.about-statusBg.darkmode {
   background-color: #161616;
   color: #fff;
}
.footerImg-container.darkmode,
.slider1Container.darkmode,
.topBar.darkmode {
   background-color: #000;
}

.team-container.darkmode {
   background: linear-gradient(0deg, rgb(0, 0, 0) 13%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0) 85%);
}

lord-icon.darkmode {
   filter: invert(1) brightness(20);
}
.button-modal.darkmode {
   background-color: #fff;
   color: #000;
}
.modal-content.darkmode,
.close-modal.darkmode {
   background-color: #161616;
}

.close-modal.darkmode button {
   filter: invert(0.75);
}
.footerImg-container.darkmode img {
   box-shadow: 400px -250px 0px -100px #000000, -600px 500px 0px 0px #000000, 50px 50px 0px -10px #d50032, -50px -50px 0px -10px #d50032, 50px 50px 0px -10px #d50032;
}
.swiper-pagination.darkmode {
   filter: invert(1) hue-rotate(195deg) saturate(5) contrast(2);
}
.card-text:last-child {
   margin-bottom: 0;
   font-size: 1.25rem;
   padding: 2rem 0px;
}
.sliderRentalContainer {
   height: 45vh;
   display: flex;
}
.sliderRental img {
   border-radius: 0.3rem;
}
#my-video {
   width: 100%;
}
@media (min-width: 1200px) {
   .modal-lg,
   .modal-xl {
      max-width: 750px;
   }
}
@media (max-width: 1200px) {
   .modal-lg,
   .modal-xl {
      max-width: 750px;
   }
   .close-modal {
      left: 98%;
   }
   .button-modal {
      padding: 0.75rem;
   }
   h2.swiper-pagination-bullet {
      font-size: 2.5rem;
      height: 2.5rem !important;
   }
   .team-container {
      padding: 12rem 0rem 0rem;
   }
}
@media (max-width: 991px) {
   .button-modal:hover {
      cursor: unset;
      transform: unset;
   }
   h2.swiper-pagination-bullet {
      font-size: 2.75rem;
      font-weight: 500;
      display: flex !important;
      height: 3.25rem !important;
      mix-blend-mode: unset;
      justify-content: center;
      align-items: center;
   }

   .about-title {
      margin-bottom: 0px;
   }
   .team-container.darkmode {
      background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0) 65%);
   }
   .team-container {
      padding: 6rem 0rem;
      background: rgb(255, 255, 255);
      background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 2%, rgba(36, 36, 36, 0) 58%, rgba(255, 255, 255, 1) 65%);
   }

   .about-statusBg {
      box-shadow: unset;
      background-color: unset;
      z-index: -1;
      margin-top: 4rem;
      color: black;
      background-color: #efefef;
   }
   .modal-body {
      padding: 0rem;
   }
   .modal-dialog {
      max-width: 600px;
      margin: 1.75rem auto;
   }
   .video-js,
   .vjs-poster {
      border-top-left-radius: 0.3rem;
      border-top-right-radius: 0.3rem;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
   }
   .row > * {
      flex-shrink: unset;
      max-width: unset;
   }
   .row {
      --bs-gutter-x: unset;
      --bs-gutter-y: unset;
   }
   .close-modal {
      height: 30px;
      width: 30px;
      left: 97%;
      top: -2%;
      z-index: 4;
   }
   .swiper-video,
   .video-js {
      height: 35vh;
   }
   .swiper-button-prev {
      display: none;
   }
   .swiper-button-next {
      display: none;
   }
   .swiper-button-prev-rental {
      display: none;
   }
   .swiper-button-next-rental {
      display: none;
   }
   .card {
      padding: 0rem 2rem;
      margin-bottom: 2rem;
   }
   .modal-icon > lord-icon {
      width: 2.65rem !important;
      height: 2.65rem !important;
      margin-right: 0.75rem;
   }

   .button-modal {
      text-decoration: none;
      display: flex;
      font-size: 1.25rem;
      padding: 0.75rem;
      border-radius: 0.375rem;
      justify-content: center;
      align-items: center;
   }
   .subtitle-modal {
      color: gray;
      margin-bottom: 0px;
   }
   .card-body {
      padding: 0;
   }
}
@media (max-width: 768px) {
   * {
      box-sizing: unset;
   }
   .topBar {
      background-color: #fff;
   }
   .about-intro {
      margin-bottom: 0rem;
   }
   .servicesMainVideo {
      margin-top: 6rem;
      margin-bottom: 3rem;
   }
   .about-intro img {
      margin-bottom: 4rem;
   }
   .img-fluid {
      height: 50vh;
      object-fit: cover;
      margin-top: 5rem;
   }
   .slider1:hover {
      transform: none;
   }
   .box:hover img {
      opacity: 1;
   }

   .row > * {
      flex-shrink: unset;
      max-width: unset;
   }
   .row {
      --bs-gutter-x: unset;
      --bs-gutter-y: unset;
   }
   .about-title {
      margin-bottom: 0rem;
      padding: 1rem 0;
   }

   /*--SLIDER--*/
   .slideshow-container {
      padding-top: 6rem;
   }

   .swiper-button-next:hover,
   .swiper-button-prev:hover {
      transform: scale(1.05);
   }
   .bi-caret-right-fill,
   .bi-caret-left-fill {
      font-size: 3rem;
   }
   .slider1Container {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding: 0px 0px 3rem 0px;
      background-color: #fff;
   }
   .clip {
      border-radius: 0.375rem;
   }

   .clip:hover {
      border-radius: unset;
   }

   .team-container.darkmode {
      background: linear-gradient(0deg, rgb(0, 0, 0) 15%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0) 85%);
   }
   .modal-body {
      padding: 0rem;
   }
   .swiper-video {
      height: 25vh;
   }
   .modal-dialog {
      position: relative;
      width: 90%;
      pointer-events: none;
   }
   .modal {
      position: fixed;
      overflow-y: hidden;
      justify-content: center;
   }
   .modal-icon {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 0rem;
   }
   .card {
      padding: 0rem 1.5rem;
      margin-bottom: 2rem;
   }
   .modal-text {
      padding: 1.5rem;
   }
   .card-text:last-child {
      margin-bottom: 0;
      font-size: 1rem;
      line-height: 1.25;
      padding: 1rem 0px;
   }
   .card-text {
      font-size: 1rem;
   }

   .modal-icon > lord-icon {
      width: 2.5rem !important;
      height: 2.5rem !important;
      margin-right: 0.75rem;
   }
   .button-modal {
      text-decoration: none;
      display: flex;
      width: 100%;
      font-size: 1em;
      border-radius: 0.375rem;
      justify-content: center;
      align-items: center;
   }
   .modal-contact {
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .vjs-theme-fantasy .vjs-big-play-button {
      width: 65px;
      height: 65px;
      line-height: 65px;
      font-size: 50px;
   }
   .video-js,
   .vjs-poster {
      border-top-left-radius: 0.3rem;
      border-top-right-radius: 0.3rem;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
   }
   .close-modal {
      height: 30px;
      width: 30px;
      left: 94%;
      top: -3%;
      z-index: 4;
   }
   .btn-close {
      box-sizing: content-box;
      width: 0.25rem;
      height: 0.25rem;
      padding: 0.25em 0.25em;
   }
   .modal-title {
      padding: 0;
      margin: 0;
      line-height: 1.5;
   }
   .subtitle-modal {
      margin-bottom: 0;
   }
   h2.swiper-pagination-bullet {
      font-size: 2rem;
      font-weight: 500;
      display: flex !important;
      height: 2.25rem !important;
      mix-blend-mode: unset;
      justify-content: center;
      align-items: center;
   }

   .team-img {
      width: 100%;
      z-index: -1;
   }
   .opacity-control h4 {
      font-size: 1.15rem;
      line-height: 0.75;
   }
   .team-container {
      padding: 6rem 0rem 0rem;
      background: rgb(255, 255, 255);
      background: linear-gradient(0deg, rgba(255, 255, 255, 1) 9%, rgba(0, 0, 0, 0) 15%, rgba(36, 36, 36, 0) 52%, rgba(255, 255, 255, 1) 62%);
   }
   .footerImg-container {
      padding: 1rem 0rem;
   }
   .footer-mail {
      padding-top: 6rem;
   }
   .footer-mail h2 {
      text-align: center;
      line-height: 1.2;
      font-size: 1.5rem;
   }

   .text-start {
      padding-top: 0;
   }
}
@media (max-width: 576px) {
   .swiper-video,
   .video-js {
      height: 23vh;
   }
   h2.swiper-pagination-bullet {
      font-size: 1.75rem;
      font-weight: 500;
      display: flex !important;
      height: 1.75rem !important;
      mix-blend-mode: unset;
      justify-content: center;
      align-items: center;
   }
   .team-container.darkmode {
      background: linear-gradient(0deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 57%, rgba(0, 0, 0) 66%);
   }
   .team-container {
      padding: 5rem 0rem 13rem;
      background: rgb(255, 255, 255);
      background: linear-gradient(0deg, rgba(255, 255, 255, 1) 10%, rgba(0, 0, 0, 0) 16%, rgba(36, 36, 36, 0) 57%, rgba(255, 255, 255, 1) 66%);
   }
   .card {
      padding: 0rem 1rem;
   }
   .card-text {
      font-size: 0.85rem;
      line-height: 1rem;
   }
   .card-title {
      font-size: 1.15rem;
   }
   .modal-title {
      padding: 0;
      margin: 0;
      line-height: 1.5;
   }
   .modal-title h2 {
      font-size: 1.5rem;
   }
   .button-modal {
      font-size: 1rem;
      padding: 0.5rem;
      margin: 0rem;
   }
   .modal-icon > lord-icon {
      width: 2.2rem !important;
      height: 2.2rem !important;
      margin-right: 0.55rem;
   }
   .footer-mail h2 {
      padding: 0rem 1.5rem;
   }
   .footerImg-container {
      padding: 0rem 0rem;
      margin-bottom: 10rem;
   }
   .sliderRental img {
      border-radius: 0.3rem;
      height: inherit;
   }
}
@media (max-width: 478px) {
   .sliderRentalContainer {
      height: 40vh;
      display: flex;
   }
}
@media (max-width: 360px) {
   .close-modal {
      left: 92%;
      top: -1%;
   }
}