@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Orbitron:wght@500&display=swap');

.detail h1{
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    color: #3c9203;
    font-family: 'IBM Plex Sans Thai', sans-serif;
    transition: .3s;
    font-size: clamp(11px, 2.5vw, 50px);


}

.detail h2{
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    color: #9b0909;
    font-family: 'IBM Plex Sans Thai', sans-serif;
    transition: .3s;
    font-size: clamp(11px, 2.5vw, 25px);

}
.detail h1:hover{
    color: #06df18;
}
.detail h2:hover{
    color: #ff2222;

}

.detail p {
    text-indent: 50px;
    overflow-wrap: break-word;
    letter-spacing: 2px;
    
    /* บน ขวา ล่าง ซ้าย */
    margin: 30px 90px 50px 90px;
    font-size: clamp(11px, 2.5vw, 21px);
    font-family: 'IBM Plex Sans Thai', sans-serif;
  }
  
 .textnew{
    font-size: clamp(14px, 3vw, 40px);
    margin-top: 60px;
    font-family: 'Audiowide', sans-serif;
    font-style: normal;
    font-weight: 800;
    color: #195c9b;
    text-shadow: 2px 2px #111;
    letter-spacing: 2px;
    text-align: center;
 }
 
.textpro{
   font-size: clamp(14px, 2.5vw, 40px);
   margin-top: 60px;

 }

 .head{
    display: flex;
    justify-content: center;
    align-items: center;
 } 
 .head ul{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
 }
 .head ul li{
    position: relative;
    list-style: none;
 }
 .head ul li h1{
    position: relative;
    font-size: 4empx;
    text-decoration: none;
    line-height: 1em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(60, 243, 23, 0.5);

 }
 .head ul li h1::before{
    content: attr(data-text);
    position: absolute;
    color: white;
    width: 0;
    overflow: hidden;
    transition: 1s;
    border-right: 1px solid #fff;

 }
 .head ul li h1:hover::before{
    width: 100%;
    -webkit-text-stroke: 1px rgba(247, 231, 8, 0.966);

 }

 .container-product{
   width: 90%;
   margin: 50px auto;
   position: relative;

 }
 
  h1{
    font-family: 'IBM Plex Sans Thai', sans-serif;
    text-align: center;

 }

 .showProduct {
   display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    padding: 10px;
   

 }

 .container-product .showProduct .card {
   background: #ffffff;
   height: 250px;
    width: 350px;
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
    overflow: hidden;
    cursor: pointer;
    position: relative;
   
 }
 .container-product .showProduct .card img{
   height: 100%;
   width: 100%;
   object-fit: cover;
   transition: .2s linear;
 }

 .container-product .showProduct .card .overlay{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 0;
   transition: opacity 0.4s ease-in-out;
   background: black;
   cursor: pointer;
 }
 .container-product .showProduct .card .overlay .con{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
   text-align: center;
 }

 .container-product .showProduct .card .overlay .con p{
   font-size: clamp(8px, 2.5vw, 20px);
   font-weight: bolder;
   font-family: 'IBM Plex Sans Thai', sans-serif;

 }
 .container-product .showProduct .card .overlay .con a{
   font-size: clamp(8px, 2.5vw, 20px);
   font-weight: bolder;
   font-family: 'IBM Plex Sans Thai', sans-serif;
   text-decoration: none;
   color: #fff;
   transition: 0.5s;

 }
 .container-product .showProduct .card .overlay .con a:hover{
   color: rgb(248, 162, 3);

 }

 .container-product .showProduct .card:hover .overlay{
   opacity: 0.8;
 }

 .container-product .showProduct .card:hover img{
   transform: scale(1.1);
 }
 

 @media (max-width:580px){
   .container-product .showProduct .card{
       width: 100%;
       height: auto;
       
   }
   .container-product .showProduct .card img{
      width: 100%;
      height: auto;
      
  }

   .previewProduct .cardProduct .detailProduct{
      width: 100%;
      height: auto;
  }
   .previewProduct .cardProduct .detailProduct img{
      width: 100%;
      height: auto;
  }
  .partner{
   width: 100%;
   height: auto;
  }
  .partner img{
   width: 100%;
   height: auto;
  }
   

}

.previewProduct{
   /* background-image: linear-gradient(to right, rgb(131, 129, 129) , rgb(31, 31, 23));
   padding: 40px; */

background: url("../img/firemin1.jpg");
position: relative;
max-width: 2500px;
padding: 40px;
margin: 50px auto;
box-shadow: 10px 5px 15px rgba(0, 0, 0, .5);

 
   
 }
 
.cardProduct{
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   justify-content: center;
   padding: 10px;
   
}
 
.cardProduct .detailProduct{
   background: #ffffff;
   height: 450px;
    width: 300px;
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
    overflow: hidden;
    cursor: pointer;
    
}

.cardProduct .detailProduct img{
   height: 100%;
   width: 100%;
   /* height: 450px;
    width: 350px; */
   object-fit: cover;
   transition: .2s linear;
}

.cardProduct .detailProduct:hover img{
   transform: scale(1.1);
}


.previewProduct h1{
   /* color: rgb(255, 255, 255);
   font-weight: bolder;
   
   font-family: 'IBM Plex Sans Thai', sans-serif;
   transition: 0.3s;
   font-size: clamp(10px, 4.5vw, 40px); */
    font-size: clamp(14px, 3.5vw, 45px);
    font-family: 'Audiowide', sans-serif;
    font-style: normal;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 2px 2px #111;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: -20px;


}

.partner{
   display: flex;
   justify-content: center;
   align-items: center;
}
.partner img{
   /* width: 100%; */
   width: 1400px;
   height: 350px;

}

@media (max-width:900px){
   
  .partner{
   width: 100%;
   height: auto;
  }
  .partner img{
   width: 100%;
   height: auto;
  }
}

.imageBg{
   background: url("../img/nbgblur1.jpg");
   position: relative;
   /* width: 100%; */
   max-width: 2500px;
   height: 100%;
   display: flex;
   justify-content: center;
   padding: 0 50px;
   margin: 0 auto;
   box-shadow: 10px 5px 15px rgba(0, 0, 0, .5);

}
.imageBg .box{
   position: relative;
   width: 1200px;
   padding: 10px;
   overflow: hidden;

   box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
   margin: 30px 50px 30px 50px;

}

.imageBg .box h1{
   position: relative;
   font-size: clamp(16px, 2.5vw, 50px);
   margin-bottom: 10px;
   text-transform: uppercase;
   color: #ffffff;
   transition: 0.3s;
   margin: 0 50px 0 50px;
   z-index: 2;
   margin-top: 10px;
   word-spacing: 7px;

}
.imageBg .box h1:hover{
   color: #195c9b;

}
.imageBg .box p{
   margin: 0 50px 0 50px;
   position: relative;
   text-indent: 50px;
   overflow-wrap: break-word;
   letter-spacing: 1px;
   font-family: 'IBM Plex Sans Thai', sans-serif;
   font-size: clamp(8px, 2.5vw, 21px);
   color: #ffffff;
   /* text-transform: uppercase; */
   z-index: 2;
   margin-top: 10px;

}

.imageBg .box a{
  text-decoration: none;
  background-color: #1f4569;
  font-size: clamp(16px, 2vw, 20px);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: bolder;
  color: white;
  border-radius: 50px;
  padding-right: 30px;
  padding-left: 30px;
  transition: .5s;

}
.imageBg .box a:hover{
  background-color: #f37500;
}

@media (max-width:600px){
   
  .imageBg .box p{
    font-size: 5px;
    text-indent: 0;
  }
  .imageBg .box{
    margin: 0;
    padding: 0;
    margin-bottom: 0;
    margin-top: 0;
    margin-left: -50px;
    margin-right: -50px;
 }
}


.container-hvac{
   /* width: 100%; */
   max-width: 2500px;

   margin: 50px auto;
   position: relative;
   padding: 30px;
   background: url("../img/hvacmin1.jpg");
   box-shadow: 10px 5px 15px rgba(0, 0, 0, .5);



 }
 .container-hvac h1{
   /* color: rgb(255, 255, 255);
   font-weight: bolder;
   margin-top: 20px;

   margin-bottom: 20px;
   font-family: 'IBM Plex Sans Thai', sans-serif;
   transition: 0.3s;
   font-size: clamp(10px, 4.5vw, 40px); */
   font-size: clamp(14px, 3.5vw, 45px);
    font-family: 'Audiowide', sans-serif;
    font-style: normal;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 2px 2px #111;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
 }
 

 .container-hvac .showProduct {
   display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    padding: 10px;
 }

 .container-hvac .showProduct .card {
   background: #ffffff;
   height: 250px;
    width: 350px;
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
    overflow: hidden;
    cursor: pointer;
    position: relative;

 }
 .container-hvac .showProduct .card img{
   height: 100%;
   width: 100%;
   object-fit: cover;
   transition: .2s linear;
 }

 .container-hvac .showProduct .card .overlay{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 0;
   transition: opacity 0.4s ease-in-out;
   background: black;
   cursor: pointer;
 }
 .container-hvac .showProduct .card .overlay .con{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
   text-align: center;
 }

 .container-hvac .showProduct .card .overlay .con p{
   font-size: clamp(8px, 2.5vw, 20px);
   font-weight: bolder;
   font-family: 'IBM Plex Sans Thai', sans-serif;

 }
 .container-hvac .showProduct .card .overlay .con a{
   font-size: clamp(8px, 2.5vw, 20px);
   font-weight: bolder;
   font-family: 'IBM Plex Sans Thai', sans-serif;
   text-decoration: none;
   color: #fff;
   transition: 0.5s;

 }
 .container-hvac .showProduct .card .overlay .con a:hover{
   color: rgb(248, 162, 3);

 }

 .container-hvac .showProduct .card:hover .overlay{
   opacity: 0.8;
 }

 .container-hvac .showProduct .card:hover img{
   transform: scale(1.1);
 }


 
.container-san{
  /* width: 100%; */
  max-width: 2500px;

  margin: 50px auto;
  position: relative;
  /* background-image: linear-gradient(to right, rgb(131, 129, 129) , rgb(31, 31, 23)); */
  padding: 30px;


  background: url("../img/sannatarymin1.jpg");
  box-shadow: 10px 5px 15px rgba(0, 0, 0, .5);

}
.container-san h1{
  /* color: rgb(255, 255, 255);
  font-weight: bolder;
  margin-top: 20px;

  margin-bottom: 20px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  transition: 0.3s;
  font-size: clamp(10px, 4.5vw, 40px); */
  font-size: clamp(14px, 3.5vw, 45px);
    font-family: 'Audiowide', sans-serif;
    font-style: normal;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 2px 2px #111;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

.container-san .showProduct {
  display: flex;
   flex-wrap: wrap;
   gap: 15px;
   justify-content: center;
   padding: 10px;
}

.container-san .showProduct .card {
  background: #ffffff;
  height: 250px;
   width: 350px;
   border: 5px solid #fff;
   box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
   overflow: hidden;
   cursor: pointer;
   position: relative;

}
.container-san .showProduct .card img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: .2s linear;
}

.container-san .showProduct .card .overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  background: black;
  cursor: pointer;
}
.container-san .showProduct .card .overlay .con{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

.container-san .showProduct .card .overlay .con p{
  font-size: clamp(8px, 2.5vw, 20px);
  font-weight: bolder;
  font-family: 'IBM Plex Sans Thai', sans-serif;

}
.container-san .showProduct .card .overlay .con a{
  font-size: clamp(8px, 2.5vw, 20px);
  font-weight: bolder;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  text-decoration: none;
  color: #fff;
  transition: 0.5s;

}
.container-san .showProduct .card .overlay .con a:hover{
  color: rgb(248, 162, 3);

}

.container-san .showProduct .card:hover .overlay{
  opacity: 0.8;
}

.container-san .showProduct .card:hover img{
  transform: scale(1.1);
}

@media (max-width:580px){

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

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

.imagecer{
  max-width: 2500px;
  margin: 20px auto;
  position: relative;
  background-image: linear-gradient(to right, rgba(131, 129, 129, 0.336) , rgba(117, 117, 117, 0.322));
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.imagecer img{
  width: 70%;
}

.imagelogo{
  max-width: 2500px;
  margin: 20px auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.imagelogo img{
  width: 100%;
}

.bgYoutube{
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  
}
.bgYoutube .youtube{
  
   display: flex;
   flex-wrap: wrap;
   gap: 75px;
   justify-content: center;
}
.bgYoutube .youtube iframe{
  
  width: 500px;
  height: 280px;
}

@media (max-width:600px) {
  .bgYoutube .youtube{
      width: 100%;
  }
  .bgYoutube .youtube iframe{
  
    width: 100%;
    height: auto;
  }
  
}