*{
    margin:0;
    padding:0;
	 font-family: "Kanit", sans-serif;
}
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
html { 
  background: url(Images/1BG2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.header{background-color: transparent;}
.overview{	  background-color: transparent;height: 120mm;}
.values{background-color: transparent; height: 120mm; margin-left: 3%;	}
.vision{background-color:transparent;	height: 90mm;  width:100%;  }
p11{background-color: #6D8B8C;}
.PP{background-color: transparent;height: 155mm;}

.header{
    width:  100%;
	background-position:center;
    background-size:cover;
    position: relative;
} 
	
nav{
	width:  100%;
	margin-top: 0%;
	margin-left: 0%;
    display: flex;
    padding: 1% -1%;
    justify-content: space-between;
    align-items: center;
}
div {
	
	width:  100%;
    padding: -1	0% 1%;
    background-color: black;
    height: 30mm;
}
nav img{
    padding: 0% 0%;
    width: 300px;
    height: 50mm;
}
.nav-links{
	width: 100%;
    flex:1;
    text-align: right;
}
.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 45px 30px;
    position: relative;
}
.nav-links ul li a{
    color: TEAL;
    text-decoration: none;
	font-weight: 600;
    font-size: 24px;
    }

.nav-links ul li ::after{
    content: '';
    width: 0%;
    height: 2px;
    background-color: white;
	color:white;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.nav-links ul li :hover::after{
    width: 100%;
}


.text-box{
        width: 90%;
    height: auto;
        background-color: transparent;
       Position: absolute;
    margin-top: 02.5%;
        Left:3%;
    transform: translate(50%,-50%)
        textalign: center;
}
.para{
        width: 90%;
    height: auto;
    background-color: transparent;
       Position: absolute;
    margin-top:  6%;
        margin-Left:4%;
    transform: translate(50%,-50%)
        textalign: center;
}
.text-box1{
        width: 90%;
    height: auto;
    background-color: transparent;
       Position: absolute;
    margin-top:12%;
        Left:3%;
    transform: translate(50%,-50%)
        textalign: center;
}
.para2{
        width: 90%;
    height: auto;
    background-color: transparent;
       Position: absolute;
    margin-top:  16%;
        margin-Left:4%;
    transform: translate(50%,-50%)
        textalign: center;
}
h1{
    font-size: 6mm;
    color: TEAL;
	background-color: transparent;}
p{    
	width: 100%;
    margin: 0px 40px;
    font-size: 5mm; 
    color: White;
}
p12{    
	width: 100%;
    margin: 10px 40px;
    font-size: 4mm; 
    color: black;
	  text-align: center;
}
.values{
	width=90%;
  margin-top: 0%;
        margin-Left:0%;       
    justify-content: space-between;
	height: 100mm;
    color: indianred;
}
h2{
  font-size: 6mm;
    color: Teal;
    padding: 30px 55px;
}

h4{
	font-size: 5mm; ;
    text-align: center;
    font-weight: 600;
    color:teal;
    }

p11{    
	width: 80%;
	display: block;
    padding: 10px -30px;
    font-size: 4mm; 
	
	text-align: center;
    color: Black;
}
.vision{
	margin-top: 2%;
    left: 3%;
    margin-bottom: auto;
    }
h3{
	margin-top:2%;
    margin-left: 2.2%;
      font-size: 6mm;
    padding: 1%;
        color: TEAL;
}
    p1{
		width: 90%;
        display: block;
    margin-left: 6.5%;
        padding: 10px 0px 15px;
              color: White;
     font-size:5mm;
}

h6{
  font-size: 6mm;
    color: teal;
    padding: 2px 3.5%;
}

h7{
	display: block;
    text-align:center;
    font-weight: 600;
	font-size: 5mm;
    margin: 0px 10%;
    color:Black;
	    }
.rows:hover{
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
}

h10{
    display: block;
    padding: center;
    text-align: Center;
    background-color: transparent;
        width: 100%;
    color: Teal;
    font-size: 5mm;
	margin-top: 25%;
    
    font-weight: 600;
}

.values1{
	width:100%;
  margin-top: -13%;
   margin-Left:1%;
	display: flex;
	background-color: transparent;
    justify-content: space-between;
	color: indianred;}

.values2{
	margin-top:-2%;
	margin-left:03.25%;
	Height: 30mm;
	flex: 55%;
    box-sizing: border-box;  
    background-color: #D3D9D4;
    box-shadow: Red;
    border-radius: 55px;
    padding:1.5% 0%;	
    text-align: left;
    font-size:6mm;
    transition:0.5s;
}
.values5{
	width: 0mm;
    box-sizing: border-box;  
    background-color: transparent;
    box-shadow: Red;
    border-radius: 25px;
    padding:1.5% 02%;	
    text-align: left;
    font-size:6mm;
}
.row3{
	height: 20mm;
	width: 80mm;
	border-radius: 60px;
	 visibility: hidden;
  	 background-color: transparent;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  padding: 5px 0;
color:teal;
  position: absolute;
  z-index: 1;
}
.values1:hover .Values2{
	box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);}
.values2:hover .row3{
  visibility: visible;
}

.values3{
	
	display: inline-block;
	width:97%;
    margin-top: 3%;
   margin-Left:5%;
	 background-color: transparent;
	display: flex;
	
    justify-content: space-between;
	color: indianred;}

.values4{
		margin-top:3	%;
	margin-left:0.5%; 
	box-sizing: border-box;
    background-color: teal;
	 width: 30mm;
	height: 30mm;
	border-radius: 100px;
	flex:35%;;
      padding:1.5% 02%;	
    text-align: left;
    font-size:6mm;
    transition:0.5s;
}
.rows{
	height: 105mm;
	width: 90mm;
	 visibility: hidden;
  	 background-color: White;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
color:Black;
  position: absolute;
  z-index: 1;
}
.values4:hover .rows{	
  	box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
	visibility: visible;
}


html{
    scroll-behavior: smooth;
}

@media(max-width:700px){
	a{font-size: 3mm;}
	p1{font-size: 3mm;}
	p2{font-size: 3mm;}
	p{font-size: 3mm;}
	h1{font-size: 4mm;}
	h2{font-size: 4mm;margin-left: -5%;}
	h3{font-size: 4mm;}
	h4{font-size: 4mm;}
	h5{font-size: 4mm;}
	h6{font-size: 4mm;}
	h7{font-size: 4mm;padding: -5% 0%;}
	h8{font-size: 4mm;}
	H9{font-size: 3mm;}
	.values1{font-size;3mm;}
	.values2{font-size;3mm;}
	.values3{font-size;3mm;}
	.values4{font-size;3mm;}
	
.header{
    width:  100%;
	height: auto;
	background-image: <img src = "Images/background2.jpg">;
	background-color:none;
    background-position:center;
    background-size:cover;
    position: relative;
}
.overview{	  background-color: transparent;height: 0mm;}	
.values{background-color: transparent; height: 20mm; margin-left: 2%;	}
.vision{background-color:transparent;	height: 20mm;  width:100%;  }
	.PP{background-color: transparent;height: 100mm;}
.values1{
	width:auto;
	height: auto;
  margin-top: -30%;
   margin-Left:-2%;
	display: inline;
	background-color: transparent;
   	color: indianred;}

.values2{
	margin-top:-03%;
	margin-left:35%;
	 margin-bottom: 15%;
	Height: 6mm;
	flex: 55%;
    box-sizing: border-box;  
    background-color: teal;
	box-shadow: Red;
    border-radius: 90px;
    padding:1.5% 0%;	
    text-align: left;
    font-size:6mm;
    transition:0.5s;
}
	.row3{
	height: 20mm;
	width: 100mm;
	 visibility: hidden;
  	 background-color: transparent;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
color:beige;
  position: absolute;
  z-index: 1;
}
	.values2:hover .row3{
		box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
  visibility: visible;
		
}

.values3{
		width: 35mm;
	height: 35mm;
	width:98%;
	margin-Top:10%;
    margin-Left:1%;
	display: inline;
	
	background-color: transparent;
    justify-content: space-between;
	color: indianred;}

.values4{
	margin-top: 40%;
	margin-left:35%; 
	margin-bottom: 5%;
	Height: 6mm;
	box-sizing: border-box;
    background-color: teal;
	width:40mm;
	height:40mm;
	border-radius: 90px;
	flex:AUTO;
      padding:0% 02%;	
    text-align: left;
    font-size:5mm;
    transition:0.5s;
}
.rows{
	height: 105mm;
	width: 80mm;
	 visibility: hidden;
  	 background-color: Black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
color:Black;
  position: absolute;
  z-index: 1;
}
.values4:hover .rows{
	box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
  visibility: visible;
}

	h4{display: block;color: Black;text-align: center;	}
	h6{margin-top: 60%;}
	h7{color: Black;text-align: center;	}
	
 
	nav img{
    padding: 0% 0%;
    width: 90px;
    height: 15mm;
}
	div {
	width:  100%;
    padding: -2	1%;
    background-color: Teal;
    height: 6mm;
}
.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 0px 1px;
	margin-left:5%;
    position: relative;
}
.nav-links ul li a{
    color: Black;
    text-decoration: none;
    font-size: 3mm;
	    }
	.nav-links ul li ::after{
    content: '';
    width: 0%;
    height: 2px;
    background-color: Black;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.nav-links ul li :hover::after{
    width: 100%;
}	
	.text-box{margin-top: 1%;}
	.para{margin-top: 8%;margin-left: -3%;}
	.text-box1{margin-top: 30%;}
	.para2{margin-top: 37%;margin-left: -3%;}
	.values{margin-top: 63%;margin-left: -5%;}
	.values2{width:10mm;height:8mm;}
	.values2{width:30mm;height:30mm;padding:10% 0%;}
	.vision{margin-top:0%;margin-left: 0%;}
	.values4{margin-top: -3%;margin-left: 35%;}
	.values4{width:30mm;height:30mm;padding:5% 0%;}
	.CU{margin-top: 10%;margin-left: 0%;}
	
	html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
}