@import url('https://fonts.googleapis.com/css?family=Varela+Round');

* {
  
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
overflow-x: hidden;

}
body {
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 16px;
background-color: #ffffff;
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;   
background-color: #ff636300;
font-family: 'Kanit', sans-serif;
}

.hdr-cont {
  position: fixed;
  width: 100%;
  background-color: #a11919;
opacity: 1;
z-index: 99;
/* background-image:  linear-gradient(#1c211b 2px, transparent 2px), linear-gradient(90deg, #1c211b 2px, transparent 2px), linear-gradient(#1c211b 1px, transparent 1px), linear-gradient(90deg, #1c211b 1px, #000000 1px);
background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; */
}
.hdr {
  display: flex;
  flex-direction: row;
  width: 100%;
  border: 1px solid rgb(177, 14, 14);
  padding: 10px;
  z-index: 20;
  font-family: "Piedra", serif;
  font-weight: 400;
  font-style: normal;

}
.logo {
  float: left;
  color: #fff;
}
.logo-link {
  color: #fff;
  float:left;
  text-decoration: none;
  margin-left: 4px;

}
.label {
  float:left;
  color: #ffffff;
  flex: 2;
  font-size: 22px;
  margin-left: 4px;
  font-family: 'Kanit', sans-serif;
  
}
.page-name {
  text-align: center;
  flex: 1;
  font-size: 16px;
  color:gold;
  font-family: 'Kanit', sans-serif;
}
#menu-icon {
  display: none;
  flex: .3;
  color: #ffffff;
}
img {
  border-radius: 6px;
}
#hdr-clear {
 margin-top: 72px;

}

.top1-cont {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 48px;
  height: 46px;
  background-color: #000000;
  opacity: .6;
  border-radius: 8px;
  cursor: pointer;
}
.top1 {
  text-align: center;
  color: rgb(255, 115, 0);
  font-size: 2.6em;
  
}

.top-bx {


}


.hero-wrap2 {
  position: relative;width: 100%;overflow: hidden;
}
.hero-text2 {
  position: absolute;font-family: 'Kanit', sans-serif;
  color: #353535; opacity: .8;

}










.tag2 {
  padding: 20px;
  font-size: 1.5em;
  text-align:center;
  background-color: rgb(177, 14, 14);
  opacity:.8;
  color:#fffdfa;
}


.tag3 {
  padding: 20px;
  font-size: 1.5em;
  text-align:center;
  background-color:#ffac11;
  opacity:.9;
  color:#021104;
}
.banner-holder {

  width: 100%;
}
.cats {
  background-color: #e71830;
  margin: 10px;
  padding: 10px;
  border-radius: 12px;
  color: #fff;
  
 }
 .cats p {
  font-size: 148%;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 28px;
  margin-top: 10px;
  opacity: .8;
 }

#menu-top {
font-size: .6em;

}
.desk-nav {
display: flex;
/* font-family: "Piedra", serif;
  font-weight: 400;
  font-style: normal; */
  

}

#mob-nav {
  display: none;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  /* border: 1px solid black; */
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color:  #a11919;
  
  
}
.dk-bx1 {
  display:block;
  color: #a51616;
  /* text-shadow: 4px 4px 4px #000000; */
  padding: 10px;
  font-size: 1.8em;
  width: 100%;
  /* border: 1px solid black; */
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  background-color: #07691c00;
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  font-style: normal;
  /* border-bottom: 5px solid rgb(28, 255, 8);
  border-left: 5px solid rgb(28, 255, 8);
  border-top: 5px solid rgb(12, 116, 2);
  border-right: 5px solid rgb(12, 116, 2);
   */
}

.mn-bx1 {
  color: #940707;
  /* text-shadow: 4px 4px 4px #000000; */
  margin: 4px;
  padding: 10px;
  font-size: 1.8em;
  width: 100%;
  /* border: 1px solid black; */
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  background-color: gold;
  border-radius: 6px;
  /* border-bottom: 5px solid rgb(28, 255, 8);
  border-left: 5px solid rgb(28, 255, 8);
  border-top: 5px solid rgb(12, 116, 2);
  border-right: 5px solid rgb(12, 116, 2); */
  /* background: url(/images/brick-butt-1.jpg);
  background-size: cover;
  background-repeat: no-repeat; */
}
.mn-bx1:hover{
  
  background-color: rgb(255, 230, 91);
  
}
.dk-bx1:hover {
  color: rgb(255, 70, 70);

} 
.picbox {

  width: 100%;

}

.card-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
/* card container for grid items - plastic folders*/
.card {
  
  box-shadow: 5px 10px 18px #888888;
  color: black;
  margin: 10px;
  padding: 10px;
  border-radius: 4px;
  overflow: hidden;
  font-size: 1.0em;
  font-weight: bold;
}
/*.card img {padding-top: 10px;} */

.card p i { color: rgb(37, 199, 31); cursor: pointer;}

.cont{
  background-color: darkgray;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
  align-items: center;
/* background gradients for cont */
  background-image: linear-gradient(135deg, transparent 0%, transparent 38%,rgba(202, 214, 80,0.5) 38%, rgba(202, 214, 80,0.5) 62%,transparent 62%, transparent 64%,rgba(161, 197, 63,0.5) 64%, rgba(161, 197, 63,0.5) 100%),linear-gradient(45deg, transparent 0%, transparent 56%,rgb(202, 214, 80) 56%, rgb(202, 214, 80) 64%,rgb(120, 180, 46) 64%, rgb(120, 180, 46) 91%,transparent 91%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
}
/* 2nd background gradients for cont-3 */
.card-3 {
  padding: 20px;
  background-image: linear-gradient(135deg, transparent 0%, transparent 15%,rgba(177, 152, 245,0.5) 15%, rgba(177, 152, 245,0.5) 71%,transparent 71%, transparent 90%,rgba(116, 94, 203,0.5) 90%, rgba(116, 94, 203,0.5) 100%),linear-gradient(45deg, transparent 0%, transparent 47%,rgb(177, 152, 245) 47%, rgb(177, 152, 245) 58%,rgb(137, 114, 217) 58%, rgb(137, 114, 217) 80%,transparent 80%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
}
/* building materials bullet points */
.p-card-2 {
  margin-top: 10px;
  border-radius: 4px;
  padding-left: 16px;
  text-align: left;
}
.b-card-2 {
  font-weight: 800;
  color: rgb(92, 92, 92);
  padding: 10px;
}
.col-box {
  width: 90%;
  margin: 14px;
  font-size: 140%;
 }

 .pack-head {
  text-align: center;
  background-color: rgb(189, 118, 255);
  color: #fff;
  padding: 10px;
  font-family: 'Varela Round', sans-serif;
  font-size: 1.5rem;
  padding: 20px;
  min-height: 200px;

 }
 .pack-head img {
  border-radius: 8px;;
 }
 .pack-cont {

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  /* align-content: center; */
  font-size: 1.4rem;
  gap:10px;
  margin: 10px;
 }
 .pack-bullet { 
  width: 70%;
  margin: 20px 20px;
  
  
 }
 .pack-bullet li {
 font-weight: 600px;
 font-size: 1.5rem;
 color:#e61a0b;
 opacity: 0.6;
 }
 .pack-bullet p{
  font-size: 1.2rem;
  margin: 10px;
  opacity: 0.8;

 }

.header-cont {margin:10px;padding:6px;border-radius: 8px;background-color: #cadacd;margin-top: 30px;border-top: 10px groove rgb(235, 135, 88);}
header {background-color: #9fbd7d;border-radius: 6px;padding:4px;text-align: center;margin: 4px;}
main {}
section {margin: 8px;background-color: #b5d3ad;padding: 10px;border-radius: 6px;;}
section p {font-size: 1.4rem;text-indent: 10px;
margin-top:10px;}
ol {margin-left: 40px;margin-top:10px; }
ol a {text-decoration: none; }
ol li {padding: 10px; font-weight: bolder;font-size: 1.6em;}




.footer-cont {

display:flex;
/* background-color: #2b2b2b; */
background-color: #000000;
opacity: 1;
background-image:  linear-gradient(#1c211b 2px, transparent 2px), linear-gradient(90deg, #1c211b 2px, transparent 2px), linear-gradient(#1c211b 1px, transparent 1px), linear-gradient(90deg, #1c211b 1px, #000000 1px);
background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
border-top: 2px solid #d82a0b;
}
.foot-bx  {
  flex: 1;
  color: #fff;
  padding: 10px;
  margin-top: 16px;
}
.foot-bx h3{
  color:#fff;
  margin-top: 16px;
  opacity: .6;
}
.tel-num1 {
  margin-top: 10px;
 display: inline-block;
  background-color: #fff;
  color: blue;
  font-size: 1.4rem;
  padding: 10px 14px 10px 14px;
  text-decoration: none;
  border-radius: 8px;
}

.foot-bx-logo  {
  flex: .5;
  color: #fff;
  padding: 10px;


}
.copy-bar {

  width: 100%;
  color: #e0e0e0;
  text-align: center;
  padding: 10px;
  background-color: #a11919;
}
i {
  margin-left: 60px;
  color: pink;
}
@media screen and (max-width: 768px) {
  #menu-icon {
  display: block;  
  text-align: right;
  font-weight:800;
  font-size: 2em;
  cursor: pointer;

}
.hr2-h2-1 {font-size: 28px;}
.hr2-h3-1 {font-size: 18px;}
.hr2-p-1 {font-size: 18px;color:rgb(255, 255, 255);}

.hr2-h2-2 {font-size: 20px;}
.hr2-h3-2 {font-size: 14px;}
.hr2-p-2 {font-size: 12px;color:red;}

.card-wrapper {
  grid-template-columns: 1fr;
  margin: 20px;
}
.card-2 {      
  width: 100%;
  margin: 0 auto;
}
.pack-cont {

  
  grid-template-columns: 1fr;
}
  
  .desk-nav {
  display: none;
  }
  /* #mob-nav {display:none;} */

}
@media screen and (min-width: 768px) {

  #mob-nav {display:none !important;}

.hr2-h2-1 {font-size: 4.4em;}
.hr2-h3-1 {font-size: 2.2em;}
.hr2-p-1 {font-size: 2.4em;color:rgb(255, 255, 255);}

.hr2-h2-2 {font-size: 2.8em;}
.hr2-h3-2 {font-size: 2.0em;}
.hr2-p-2 {font-size: 1.6em;color:red;}
}