@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&display=swap');

/*html {
    overflow-y: scroll;
}*/



 body {
    font-family: 'Kanit', sans-serif;
    min-width:  800px;
    height: 600px;
    position: absolute;
    margin-top: 0;
    
}

    

  .home-image {
     margin-left: 0px;
     /*min-width: 100%;*/
    /*margin-top: 250px;*/
    margin-top: 50px;
  }

 

 nav1{
    /*width: 100%;*/
    /*margin-top: -90%;*/
    margin-top: 1%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*float: left;*/
   
}

   .logo {
    width: 120px;
    height: 120px;
    /*top: -1290px;*/
    margin-left: 50px;
 }


 .no-svg .menu-icon{
    float:  right;
    background: rgb(146, 196, 211);
    position: fixed;
    width: 60px;
    height: 60px;
    /*margin-top: 1240px;*/
    right: 10px;
    cursor: pointer;
    
}

.active{
    background: rgb(138, 175, 182);
    position: absolute;
    display: block;
    width: 30%;
    /*left: 20px;*/
    top: 230px;
    height: 95%; 
}


 ul{
    display: none;
    list-style-type: none;
    /*margin: 0;
    padding: 0;*/
}

ul li a.current {
    background-color: lightgray;
}


 ul li a {
    background: rgba(255, 255, 255, .35);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    color: black;
    font-size: 22px;
    display: block;
    padding: 0.8em 2em;
}

ul li a:hover {background-color: lightslategray;   
 }



 .container {
    /*padding: 20px 40px 40px;
    display: flex;*/
    margin-top: 5%;
    
   }

   .container .no-svg {
        transform-origin: 0px 0px; }
    
   .container .container-text {
        display: inline-block;
        font-size: 36px;
        font-weight: bold;
        color: #550000ff;
        width: 35%;
        margin-inline-start: 20%;
        clear: both;
        text-anchor: unset;
        overflow: hidden;
        /*padding:  50px;*/

    }
 
    .container .container-image {
        display: inline;
        width: 280px;
        float: right;
        padding: 30px;
      
    }
    
    .container1 {
        /*padding: 20px 40px 40px;
        display: flex;*/
        margin-top: 50px;
       }

       .container1 .no-svg {
            transform-origin: 0px 0px; }
        
           
        
       .container1 .container-text1 {
            display: inline-block;
            margin-top: 0px;
            font-size: 28px;
            /*font-weight: bold;*/
            margin-right: 5%;
            width: 48%;
            clear:  both;
            text-anchor: unset;
            padding:  10px;
    
        }

        .container1 .container-image1 {
            display: inline;
            width: 350px;
            float: left;
            /*padding: 10px;*/
          
        }
     
        
          
        .container_2 {
            /*padding: 20px 40px 40px;
            display: flex;*/
            margin-top: 50px;
           }
           .container_2 .no-svg {
                transform-origin: 0px 0px; }
            
           .container_2 .container-text2 {
                display: inline-block;
                font-size: 36px;
                width: 35%;
                color: #550000ff; 
                font-weight: bold;
                margin-inline-start: 15%;
                text-anchor: unset;
    
        
            }
         
            .container_2 .container-image2 {
                display: inline;
                width: 350px;
                float: right;
                margin-right: 10px;
              
            }

            .container3 {
                /*padding: 20px 40px 40px;
                display: flex;*/
                margin-top: 50px;
               }
               .container3 .no-svg {
                    transform-origin: 0px 0px; }
                
               .container3 .container-text3 {
                    display: inline-block;
                    margin-top: 0px;
                    font-size: 28px;
                    /*font-weight: bold;*/
                    margin-right: 5%;
                    width: 45%;
                    text-anchor: unset;
                    padding:  10px;
            
                }
             
                .container3 .container-image3 {
                    display: inline;
                    width: 350px;
                    float: left;
                    padding: 10px;
                  
                }

                .container_4 {
                    /*padding: 20px 40px 40px;
                    display: flex;*/
                    margin-top: 50px;
                   }
                   .container_4 .no-svg {
                        transform-origin: 0px 0px; }
                    
                   .container_4 .container-text4 {
                        display: inline-block;
                        font-size: 40px;
                        font-weight: bold;
                        color: #550000;
                        width: 60%;
                        margin-inline-start:50px;
                        text-anchor: unset;
                        padding:  10px;
                
                    }
                 
                    .container_4 .container-image4 {
                        display: inline;
                        width: 180px;
                        float: right;
                        padding: 10px;
                        margin-top: 50px;
                        margin-right: 20px;
                    }

                    @media only screen and (min-width: 900px) and (max-width: 1199px) 
                    
                    {
                      
                        body {
                            min-width:  100%;
                            position: absolute;
                            /*margin: 20px auto;*/
                    
                          }

                          /*nav1{
                           margin-top: -1200px;*/
                           
                          nav1 {
                              margin-top: 1.2%;
                              overflow: hidden;
                          }
                       
                          logo {
                            width: 100px;
                            height: 100px;
                           /* margin-top: -300px;*/
                          }

                          .menu-icon {
                            display:  none;
                            
                        }

                        nav1 ul{
                            display:flex;
                            list-style: none;
                            padding: 0;
                            margin-right: 10px;
                            /*margin-top: -300px;*/
                        }
                    
                        ul li{ 
                            /*margin: 10px 8px 8px 8px;*/
                              margin: 8px  6px 6px 6px; 
                        }

                        ul li a.current {
                            background-color: lightgray;
                        }
                      
                       ul li a {
                           text-decoration: none;
                           color: black;
                           font-size: 18px;
                           font-weight: bold;
                           display: block;
                           padding: 8px;
                       }
                    

                        .container {
                             
                            margin-top: 5%;

                           }


                           .container .container-text {
                            display: inline-block;
                            font-size: 36px;
                            font-weight: bold;
                            color: #550000ff;
                            width: 40%;
                            margin-inline-start: 25%;
                            clear: both;
                            text-anchor: unset;
                            overflow: hidden;
                            /*padding:  50px;*/
                    
                        }
                     
                        .container .container-image {
                            display: inline;
                            width: 250px;
                            float: right;
                            padding: 30px;
                          
                        }
                        
                        .container1 {
                            /*padding: 20px 40px 40px;
                            display: flex;*/
                            margin-top: 50px;
                           }
                    
                           .container1 .no-svg {
                                transform-origin: 0px 0px; }
                            
                               
                            
                           .container1 .container-text1 {
                                display: inline-block;
                                margin-top: 0px;
                                font-size: 28px;
                                /*font-weight: bold;*/
                                margin-right: 10%;
                                width: 48%;
                                clear:  both;
                                text-anchor: unset;
                                padding:  10px;
                        
                            }
                    
                            .container1 .container-image1 {
                                display: inline;
                                width: 350px;
                                float: left;
                                /*padding: 10px;*/
                              
                            }
                         
                            
                              
                            .container_2 {
                                /*padding: 20px 40px 40px;
                                display: flex;*/
                                margin-top: 50px;
                               }
                               .container_2 .no-svg {
                                    transform-origin: 0px 0px; }
                                
                               .container_2 .container-text2 {
                                    display: inline-block;
                                    font-size: 36px;
                                    width: 35%;
                                    color: #550000ff; 
                                    font-weight: bold;
                                    margin-inline-start: 15%;
                                    text-anchor: unset;
                        
                            
                                }
                             
                                .container_2 .container-image2 {
                                    display: inline;
                                    width: 350px;
                                    float: right;
                                    margin-right: 10px;
                                  
                                }
                    
                                .container3 {
                                    /*padding: 20px 40px 40px;
                                    display: flex;*/
                                    margin-top: 50px;
                                   }
                                   .container3 .no-svg {
                                        transform-origin: 0px 0px; }
                                    
                                   .container3 .container-text3 {
                                        display: inline-block;
                                        margin-top: 0px;
                                        font-size: 28px;
                                        /*font-weight: bold;*/
                                        margin-right: 10%;
                                        width: 45%;
                                        clear: both;
                                        text-anchor: unset;
                                        padding:  10px;
                                
                                    }
                                 
                                    .container3 .container-image3 {
                                        display: inline;
                                        width: 350px;
                                        float: left;
                                        padding: 10px;
                                      
                                    }
                    
                                    .container_4 {
                                        /*padding: 20px 40px 40px;
                                        display: flex;*/
                                        margin-top: 50px;
                                       }
                                       .container_4 .no-svg {
                                            transform-origin: 0px 0px; }
                                        
                                       .container_4 .container-text4 {
                                            display: inline-block;
                                            font-size: 40px;
                                            font-weight: bold;
                                            color: #550000;
                                            width: 60%;
                                            margin-inline-start:50px;
                                            text-anchor: unset;
                                            padding:  10px;
                                    
                                        }
                                     
                                        .container_4 .container-image4 {
                                            display: inline;
                                            width: 180px;
                                            float: right;
                                            padding: 10px;
                                            margin-top: 50px;
                                            margin-right: 20px;
                                        }
                          

                    }    
  
                    @media only screen and (min-width: 1200px) and (max-height: 899px){

                        body {
                             min-width:  100%;
                             height: 10%;
                             position: absolute;
                             margin-top: 0;
                             /*margin: 20px auto;*/
                     
                           }

                           /*nav1{
                            margin-top: -1200px;*/
                            
                           nav1 {
                               margin-top: 2%;
                               overflow: hidden;
                           }
                        
                     
                           .logo {
                             width: 110px;
                             height: 110px;
                            /* margin-top: -300px;*/
                           }
                         
                           .menu-icon {
                             display:  none;
                             
                         }
                            
                        
                        
                         nav1 ul{
                             display:flex;
                             list-style: none;
                             padding: 0;
                             margin-right: 10px;
                             /*margin-top: -300px;*/
                         }
                     
                         ul li{ 
                             /*margin: 15px 8px 15px 8px; */
                             margin: 12px 6px 12px 6px; 
                     
                         }

                         ul li a.current {
                            background-color: lightgray;
                        }
                       
                        ul li a {
                            text-decoration: none;
                            color: black;
                            font-size: 20px;
                            font-weight: bold;
                            display: block;
                            padding: 0.8em;
                        }
                     
                         /*.main-nav a {
                            margin-top: -1100px;
                            float: left; 
                            color: black;
                            text-align: center;
                            padding: 14px 16px;
                            text-decoration: none;
                            font-size: 20px;
                        }*/
                     
                     
                        .home-image {
                            /*display: block;
                            margin-right: auto; */
                            margin-top: 20px;
                            min-width: 100%;
                        }
                     
                      /*  .container {
                           
                            margin-top: 80%;
                            
                           }*/

                           .container {
                             
                            margin-top: 4%;

                           }

                         .container .container-text {
                             display: inline-block;
                             font-size: 36px;
                             font-weight: bold;
                             margin-inline-start: 28%;
                             width: 35%;
                             clear: both;
                             text-anchor: unset;
                             padding:  50px;
                     
                         }

                         .container1 .container-text1 {
                            margin-top: 0px;
                            margin-inline-start: 0;
                            margin-right: 8%;
                            width: 60%;
                            /*clear: both;*/
                    
                        }

                         
                     
                         .container_2 .container-text2 {
                             display: inline-block;
                             font-size: 36px;
                             /*font-weight: bold;*/
                             margin-inline-start: 30%;
                             width: 35%;
                             clear: both;
                             text-anchor: unset;
                             padding:  10px;
                     
                         }

                         .container3 .container-text3 {
                            margin-top: 0px;
                            margin-inline-start: 0;
                            margin-right: 5%;
                            width: 55%;
                            /*clear: both;*/
                    
                        }

                
                     
                         .container_4 .container-text4 {
                             display: inline-block;
                             font-size: 40px;
                             font-weight: bold;
                             color: #550000;
                             margin-inline-start:50px;
                             text-anchor: unset;
                             padding:  10px;
                     
                         }
                     
                         .container1 .container-text1 {
                             font-weight: normal;
                         }
                     
                         .container3 .container-text3{
                             font-weight: normal;
                     
                         }
                     
                     
                        }

    @media only screen and (min-width: 1600px) and (min-height: 900px){

  
     body {
        width: 100%px;
        margin: 20px auto;

      }
     
      nav1 {
        margin-top: 5%;
    }

      .logo {
        width: 110px;
        height: 110px;
        /*margin-top: -300px;*/
      
      }
    
      .menu-icon {
        display:  none;
    }

    
 
    nav1 ul{
        display: flex;
        list-style: none;
        padding: 0;
        margin-right: 15px;
        /*margin-top: -300px;*/
    }
   
     ul li{ 
         /*margin: 20px 10px 20px 10px;*/
         margin:  16px 8px 16px 8px;
     }
      
     ul li a.current {
        background-color: lightgray;
    }

     ul li a {
        text-decoration: none;
        color: black;
        font-size: 20px;
        font-weight: bold;
        display: block;
        padding: 2em;
    }

  

    .home-image {
        /*display: block;
        margin-right: auto; */
        /*margin-top: 200px;*/
        min-width: 100%;
     
       /*background-image: url("page1_031.svg")  !important ;
       background-size: contain;*/
        
        /*background: url('../images/home_img.svg') no-repeat;
        background-position: right;
        width: 580px;
        height: 530px;
        margin: -29em 0 0 21em;
        padding: 0;
           -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 600px;
            height: 680px;
            margin-right: 0;
            margin-left: 260px;
            margin-top: -22em;*/
          
        }

        .container {
            margin-top: 4%;
        }

        .container .container-text {
            display: inline-block;
            font-size: 36px;
            font-weight: bold;
            /*margin-inline-start: 550px;*/
            margin-inline-start: 30%;
            width: 35%;
            clear: both;
            text-anchor: unset;
            padding:  50px;
    
        }

        .container .container-image {
            display: inline;
            width: 320px;
            float: right;
            padding: 30px;
           
        }

        .container1 .container-text1 {
            margin-top: 0px;
            margin-inline-start: 0;
            margin-right: 10%;
            width: 60%;
            /*clear: both;*/
    
        }


        .container_2 .container-text2 {
            display: inline-block;
            font-size: 36px;
            /*font-weight: bold;*/
            margin-inline-start: 30%;
            width: 35%;
            clear: both;
            text-anchor: unset;
            padding:  10px;
    
        }

        .container3 .container-text3 {
            margin-top: 0px;
            margin-inline-start: 0;
            margin-right: 10%;
            width: 60%;
            /*clear: both;*/
    
        }


        .container_4 .container-text4 {
            display: inline-block;
            font-size: 40px;
            font-weight: bold;
            color: #550000;
            margin-inline-start:50px;
            text-anchor: unset;
            padding:  10px;
    
        }

        .container1 .container-text1 {
            font-weight: normal;
        }

        .container3 .container-text3{
            font-weight: normal;

        }
     
}