:root {
  --color-white: #FFFFFF;
  --color-black:#000000;
  --color-dark-grey: #353535;
  --color-grey: #646464;
  --color-light-grey: #E3E3E3;
  --color-primary: #FFD400;
  --color-secondary: #EDBD00;
  --color-line: #06C755;
  --color-facebook: #1877F2;
  --color-light-blue: #A8CBFF;
  --color-light-pink: #FFD3F2;
  
  --ts-300:all 0.3s ease-out;
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  src: url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  src: url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  src: url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  src: url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Regular.woff2') format('woff2');
  font-weight: 400; /* 'normal' is an alias for 400 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  src: url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  src: url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  src: url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body{
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 1rem;
  /* line-height: 1.5; */
  color: var(--color-black);
  background-color: var(--color-white);
}
header{
  z-index: auto;
}
a{
  text-decoration: none;
}
.link-white{
  color:var(--color-white);
}
.link-white:hover{
  color:var(--color-secondary);
}
.link-black{
  color:var(--color-black);
}
.link-black:hover{
  color:var(--color-secondary);
}
.text-grey{
  color:var(--color-grey) !important;
}
.text-dark-grey{
  color: var(--color-dark-grey) !important;
}

#logoHeader{
  width:200px;
  height:auto;
  /* margin-right:60px; */
}

.btn-primary{
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-black) !important ;
}
.btn-primary:hover{
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-dark-black) ;
}
.btn-line{
  background-color: var(--color-line)!important;
  border-color: var(--color-line)!important;
  color: var(--color-white) !important;
  transition: var(--ts-300);
}
.btn-facebook{
  background-color: var(--color-facebook) !important;
  border-color: var(--color-facebook) !important;
  color: var(--color-white) !important;
  transition: var(--ts-300);
}
.btn-line:hover, .btn-facebook:hover{
  filter:brightness(1.2);
}
.icon-white{
  filter: invert(1);
}
.icon-black{
  filter: invert(0);
}

.w-60 {
  width: 60%;
}

.fs-48{
  font-size: 3rem;
}
.fs-7{
  font-size: .875rem;;
}
#headerBar{
  position:relative;
  background-color:var(--color-grey);
  color:var(--color-white);
  padding: 0.75rem 1rem;
}
#headerBar:before {
    position: absolute;
    content: '';
    top:0;
    left: 0;
    transform:translateX(-100%);
    width: 0;
    height: 0;
    border-top: 66px solid var(--color-grey);
    border-left: 66px solid transparent;
}
#headerBar:after {
  content:'';
  background-color:var(--color-grey);
  width: calc((100vw - 1320px) / 2);
  height:100%;
  position:absolute;
  top:0;
  left:100%;
  z-index:-1;
}
#heroBannerSec{
  min-height:440px;
  background-image: url(../images/herobanner.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;
  overflow:hidden;
}
#heroBannerSec:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:var(--color-black);
  opacity:.4;
}
#heroBannerSec button, #heroBannerSec a{
  justify-content:center;
  width:210px;
}
#btnEsPrice{
  height:48px;
}

#heroBanner{
  height: 680px;
}

#captionHeroBanner{
  background: rgba(26, 26, 26, 75%);
}

#navigationHeroBanner .swiper-button-next, #navigationHeroBanner .swiper-button-prev{
  border:1px solid var(--color-light-grey);
  background-color: transparent;
  color: var(--color-light-grey);
  width:72px;
  height:72px;
  border-radius:100%;
  opacity: .5;
  transition: var(--ts-300);
}
#navigationHeroBanner .swiper-button-next:hover, #navigationHeroBanner .swiper-button-prev:hover{
  opacity: 1;
  background-color:var(--color-primary);
  color:var(--color-black);
}
#navigationHeroBanner .swiper-button-next{
  right:1rem;
}
#navigationHeroBanner .swiper-button-prev{
  left:1rem;
}
#navigationHeroBanner .swiper-button-next:after, #navigationHeroBanner .swiper-button-prev:after{
  font-size:1.5rem;
  font-weight: bold;
}
#introSec{
  margin-top:-60px;
  position:relative;
  z-index:1;
}
#introSec .row{
  margin-left:0;
  margin-right:0;
  background-color: var(--color-white);
}
.box-shadow{
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, .2));
}

#aboutSec{
  background-image: url('../images/bg_aboutus.webp');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-grey{
  background-color:var(--color-grey) !important;
}
.bg-light-grey{
  background-color:var(--color-light-grey) !important;
}
.bg-light-blue{
  background-color:var(--color-light-blue) !important;
}
.bg-light-pink{
  background-color:var(--color-light-pink) !important;
}
.bg-wallpaper-2{
  background-image: url('../images/bg_ourproduct.webp');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
footer{
  background-color:var(--color-grey);
  background-image:url('../images/bg_footer.webp');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top:40px;
}
#contactSec:before{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:50%;
  background-color:var(--color-white);
  z-index:0;
}
.list-social li svg{
  width:32px;
  height:32px;
}
.list-social li svg path{
  transition: var(--ts-300);
  fill: var(--color-black);
}
.list-social li a:hover svg path{
  fill:var(--color-secondary);
}

.blog-card{
  display:flex;
  flex-direction: column;
  height:100%;
  border:1px solid var(--color-light-grey);
}
.blog-card > div:last-child{
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.blog-card .read-more{
  margin-top:auto;
  color:var(--color-grey);
  transition:var(--ts-300);
}
.blog-card:hover .read-more{
  color:var(--color-secondary);
}
.blog-card .read-more svg path{
  transition: var(--ts-300);
}
.blog-card:hover .read-more svg path{
  fill:var(--color-secondary);
}
.blog-featured{
  width:100%;
  height:250px;
  overflow:hidden;
  flex:none;
}
.blog-featured img{
  transition: var(--ts-300);
}
.blog-card:hover .blog-featured img{
  transform: scale(1.2);
}
#imgAboutUs2{
  display: block;
  margin-left:auto;
  margin-top:-100px;
}
.pagination li button{
  border-radius: 100% !important;
  width:40px;
  height:40px;
  display: flex;
  align-items:center;
  justify-content: center;
  background-color:var(--color-light-grey);
  color:var(--color-grey) !important;
  outline:none;
  box-shadow:none !important;
}
.pagination li:hover button{
  background-color: var(--color-primary) !important;
  border-color:var(--color-primary) !important;
}
.pagination li.active button{
  background-color: var(--color-primary) !important;
  border-color:var(--color-primary) !important;
  color:var(--color-black)!important;
  pointer-events: none;
}
.product-featured{
  width:100%;
  aspect-ratio: 1/1;
  background-color:var(--color-white);
  overflow:hidden;
}
.product-featured img{
  transition: var(--ts-300);
}
.product-featured:hover img{
  transform: scale(1.1);
  filter:brightness(.8);
}
.share-social svg{
  width:24px;
  height:24px;
}
.share-social svg path{
  transition:var(--ts-300);
  fill:var(--color-grey);
}
.share-social svg:hover path{
  fill:var(--color-secondary);
}
#list-portfolio{
  list-style: url("../images/bookmark.svg");
  padding-left:1.25rem;
}
#listBlog > .row{
  position:relative;
}
#listBlog > .row:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:var(--color-white);
  z-index:0;
  opacity:0;
  transition: var(--ts-300);
  pointer-events: none;
}
#listBlog > .row.loading:before{
  opacity:.3;
}
#listBlog > .row.loading:after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:80px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: var(--ts-300);
  background-image: url("../images/loading.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.dropdown-menu .dropdown-item{
  transition:var(--ts-300);
}
.dropdown-menu .dropdown-item:hover{
  background-color: var(--color-primary);
  color:var(--color-black);
}
.sticky-social-content{
  position:fixed;
  bottom:1.5rem;
  right:.75rem;
  z-index:9;
  display:flex;
  flex-direction:column;
  row-gap:.5rem;
  transition: var(--ts-300);
}
.btn-social-sticky{
  display: flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:100%;
  background-color:var(--color-primary);
  color:var(--color-white);
  font-size:1.5rem;
  font-weight: bold;
  transition:var(--ts-300);
  box-shadow: 0 0 4px rgba(0, 0, 0, .25);
}
.btn-social-sticky img{
  width:24px;
  height:24px;
}
.btn-social-sticky:hover{
  filter:brightness(1.1);
}
.btn-social-sticky.line{
  background-color: var(--color-line);
}
.btn-social-sticky.phone{
  background-color: var(--color-secondary);
}
#portfolioSlider{
  padding-bottom: 3.18rem;
}
#portfolioSlider .swiper-slide img{
  aspect-ratio: 1/1;
  width:100%;
  object-fit:cover;
}
#portfolioSlider .swiper-slide .port-desc{
  position:absolute;
  bottom:-100px;
  left:50%;
  transform:translate(-50%, 50px);
  height:100px;
  width:80%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:1rem 1.5rem;
  background-color:var(--color-primary);
  color:var(--color-black);
  transition: ease .5s;
}
#portfolioSlider .swiper-slide{
  transition: var(--ts-300);
  pointer-events: none;
  opacity: .6;
}
#portfolioSlider .swiper-slide.swiper-slide-active{
  pointer-events: fill;
  opacity: 1;
}
#portfolioSlider .swiper-slide.swiper-slide-active .port-desc{
  bottom:0;
}
#portfolioSlider .swiper-button-next, #portfolioSlider .swiper-button-prev{
  width:60px;
  height:60px;
  border-radius: 100%;;
  font-size:1.5rem;
  background-color:var(--color-white);
}
#portfolioSlider .swiper-button-next:hover, #portfolioSlider .swiper-button-prev:hover{
  background-color:var(--color-primary);
}
#portfolioSlider .swiper-button-next:after, #portfolioSlider .swiper-button-prev:after{
  font-size:1.5rem;
  color:var(--color-black);
}
.arrow-portfolio{
  width:40px;
  height:40px;
}

@media (min-width: 576px){

}

@media (min-width: 768px){
  #heroBannerSec:before{
    opacity: 1;
    top:50%;
    transform:translateY(-50%);
    left:0;
    width:100%;
    height:500%;
    background: radial-gradient(at left, rgb(53 53 53 / 95%) 30%, transparent 60%);
  }
  .sticky-social-content{
    row-gap:.5rem;
    right:1rem;
  }
  .btn-social-sticky{
    width:60px;
    height:60px;
  }
  .btn-social-sticky img{
    width:32px;
    height:32px;
  }

}

@media (min-width: 992px){
  body{
    background: #646464;
    background: -webkit-linear-gradient(90deg,rgba(100, 100, 100, 0) 50%, rgba(100, 100, 100, 1) 50%);
    background: -moz-linear-gradient(90deg,rgba(100, 100, 100, 0) 50%, rgba(100, 100, 100, 1) 50%);
    background: linear-gradient(90deg,rgba(100, 100, 100, 0) 50%, rgba(100, 100, 100, 1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#646464",
      endColorstr="#646464",
      GradientType=1
    );
    background-size:100% 66px;
    background-position: top center;
    background-repeat: no-repeat;
  }
  header .navbar-nav .nav-link{
    display:flex;
    align-items:center;
    height:66px;
    position:relative;
    font-weight: 600;
    color:var(--color-black);
  }
  header .navbar-nav .nav-link:before{
    content:'';
    position:absolute;
    display: block;
    width:0%;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    height:2px;
    background-color:var(--color-primary);
    transition:var(--ts-300);
  }
  header .navbar-nav .nav-link:hover:before, header .navbar-nav .nav-link.active:before{
    width:100%;
  }
  #logoHeaderCon{
    min-width: 282px;
  }
  #portfolioSlider .swiper-button-next, #portfolioSlider .swiper-button-prev{
  width:80px;
  height:80px;
  }
  #portfolioSlider .swiper-button-next:after, #portfolioSlider .swiper-button-prev:after{
    font-size:2rem;
  }
}

@media (min-width: 1200px){

}

@media (min-width: 1400px){

}