*{
	margin: 0;
	padding:0;
	text-transform: capitalize;
box-sizing: border-box;
/*transition: all 1s ease-in;*/
}
html{
    scroll-behavior: smooth;
}
body{
    overflow-x: hidden;
}
.head{
    /*	height:12vh;*/
	width: 100vw;
    margin-top: 0%;
    
    
}
h1 img{
height: 8vh; width: 15vw; 
    position: absolute; margin-top: 0.2vw;
    left: 1vw;
}
nav{
    height: 10vh;
	width: 100vw;
    display: flex;
    justify-content:space-around;
    align-items: center;
    flex-direction: row;
    background-color:  #4B8BBE;

    
}
ul{
	height: 10vh;
	width: 50vw;
        background-color:  #4B8BBE;

	display:flex ;
	justify-content: space-evenly;
	align-items: center;
	font-size: 1.4vw;
    font-weight: bolder;
} li a{
	text-decoration: none;
	color: white;
     padding: .6vw 1.5vw;
        font-family: sans-serif;


}

li{
	list-style: none;
   padding: 1vw;
}
h1{
    font-size: 3vw;
    font-family: 'Ubuntu', sans-serif;
	color: #ffffff;
    height: 10vh;
    width: 32vw;
    margin-left: -5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
	
}
h1 span{

    color: #ffcc00;
    font-size: 3vw;
    padding-right: 1vh;

}

.active{
    background-color:#ffcc00;
    color: black;
    border-radius: 4vh;
}
       li a:hover{

            background-color:#ffcc00;
           
            border-radius: 4vh;
        }
        .name{
            width: 100vw;
            height: 100vh;
            display:flex;
            align-items: center;
            justify-content: center;
        
        }
        .front{
            height: 80vh;
            width: 100vw;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .right{
            height: 80vh;
            width: 50vw;
            background-image: url("front-removebg-preview.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
        }
        .left{
            height: 80vh;
            width: 40vw;
            display: flex;
            flex-direction: column;
            /* align-items: center; */
            justify-content: center;
            /* text-align: center; */
        }
        .left h3{
            font-family: 'Ubuntu', sans-serif;   
             font-size: 4.5vw;
                color: rgb(2, 57, 70);
                text-transform: uppercase;
            }
            .left span{
                font-size: 1.5vw;
                font-family: 'Raleway', sans-serif;
                font-weight: 100;
            }


.text{
   position: absolute;
    top: 20vw;
    left: 4vw;
    margin: 0;
/*    font-weight: 300;*/
    display: flex;
    flex-direction: column;
    width: 40vw;
    z-index: 2;
/*
    height: 100vh;
    background-color: rgba(147, 194, 235, 0.63)
*/

}

.text span{
    color: aliceblue;
    font-family: 'Raleway', sans-serif;

}

span{
    font-size: 2vw;
}
.shadow{
    position: absolute;
    height: 90vh;
    width: 100vw;
    background-color: hsla(302, 30%, 59%, 0.5);
    z-index: 1;
}




.parent{
    
    height: 300vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    
}
.maincon{
    height:250vh;
    width: 80vw;
/*    background-color: blanchedalmond;*/
    display: flex;
    flex-direction: column;
        justify-content: center;

}

 .box{ 
/*	 background-color: rgba(114, 114, 112, 0.705); */
	display:flex;
     justify-content: center;

 } 
.container{
	width: 80vw;
	height:200vh;
	
/*	 background-color: #a1e279; */
	/* display: grid;
	grid-template-rows:repeat(3,1fr);
	grid-template-columns:repeat(2,1fr);
	grid-column-gap: 10vw;
	grid-row-gap: 5vw;  */
/*	 display: flex;*/
	 justify-content:center; 



}
.container  a{
    text-decoration: none;
    float: left;
    margin: 6vh;
    
    
}
 .container a:hover  {
    background-size: contain;
    background-color: transparent;
/*     box-shadow: 2px 2px 2px yellow;*/
}
.container a:hover .gallery{
         transform: scaleY(1);
    transform-origin: center;

         box-shadow: 2px 2px 2px #585555;

}

h2{
	margin-left:10vw ;
	font-size:3vw ;
    border-left: 1vw solid #4B8BBE;
    padding-left: 2vw;
    margin-top: 5vw;
    font-family: 'Kanit', sans-serif;
    text-align:left;

}
.scolor{
    width: 1vw;
    height: 7vh;
    background-color: #19509b;
    display: inline-block;
    position: absolute;
    left: 10vw;
    color: black;
/*    animation-name: max1;*/
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    animation-direction: alternate;
}
/*
@keyframes max1{
    0%{
        width: 1vw;
        color: #d44444;
    }
    100%{
            width:  45vw;
        color: #0c87f2;
    }
}
*/
.gallery{
height: 50vh;
width: 20vw;
border: 1px solid    rgb(182, 179, 179);
/* justify-content: center; 
/* float: left; */
border-radius: 2vh;
/* box-shadow: .5vw .5vw .5vw rgba(144, 144, 140, 0.71); */


}
img{
	width: 19vw;
	height: 40vh;
	margin: .5vw 1vw  0  .5vw;
	/* justify-items: center; */
}
figcaption{
	text-align: center;
	font-size: 1.3vw;
    font-family: "raleway",sans-serif;
    color: black;
    margin-top: 1vh;

}
h4{
	font-size: 3vw;
/*	 margin-left: vw; */
        border-left: 1vw solid  #4B8BBE;
padding-left: 2vw;
    font-family: 'Kanit', sans-serif;
}

.about{
	color: black;
	
	word-spacing: 1px;
    
  font-family: 'Raleway', sans-serif;
    line-height: 1.6;
    
}
.para{
	margin-top: 10vw;
	text-align: justify;
/*    line-height: 1.5;*/
    /*margin-bottom: 6vw;*/
    width: 100vw;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sub-para{
    width: 80vw;
    height: 50vh;
    text-align: justify;

padding-top: 0;
}


footer{
    height: 50vh;
    width: 100vw;
    background-color: #000000e2;
    color: aliceblue;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: sans-serif;
/*    margin-top: 10vw;*/
}
.foot2{
    height: 35vh;
    width: 40vw; 
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: justify;
}
.foot3{
    height: 38vh;
    width: 60vw; 
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: justify;
}
footer h5{
    font-size: 2.5vw;
}
.foot1  span{
    font-size: 1.8vw;

}
.foot2 h6{
    font-size: 2.5vw;
}
.foot2  span{
    font-size: 2vw;
}
#email{
     text-transform: lowercase;
/*    cursor: pointer;*/
    font-size: 1.8vw;
   
}
a i{
    transition: all 1s linear;
    box-shadow: 2px 2px 2px #b4adad;
}
a:hover i{
/*    font-size: 3vw;*/
    transform: scale(1.1);
    
}
.social{
    font-size: 1.8vw;
    margin: 0vw 0vw 1vw 2vw;
/*padding-right: 7vw;*/
}
.foot3 a{
    margin-left: 1vw;
        margin-top: 1vw;

}
.foot2 i{
    margin-right: 1vw;
}
.foot3 a i{
    color:rgb(25, 239, 41); font-size:1.2vw; background-color:rgb(66, 63, 63); padding:1vw; border-radius:1vh;
    
}
.foot3 a i:hover{
    background-color: #fff;
    transition: none;
}
.face{
     color:rgb(11, 109, 19);
}
#loc{
    font-size: 1.6vw;
    padding-left: 2vh;

}
#upper{
    color:rgb(25, 239, 41); font-size:2vw; background-color:black; padding:1vw; border-radius:50%; position: fixed; top: 25vw; right: 0vw; z-index:2;
}
#menu{
    display: inline;
    cursor: pointer;
    font-size: 2vw;
    color: white;
    position: absolute;
    display: none;
}
#menu2{
    position: absolute;
    visibility: hidden;

}
.con{
    width: 25vw;
    height: 10vh;
    /* background-color: #fff; */

    display: flex;
    /* justify-content: space-evenly; */
    align-items: center;
}
.con i{
    color:white; font-size: 2vw;
     background-color: #595c5c; border-radius: 50%;
      padding: 2vh;
      /* text-align: justify; */
}
.con span{
    color: white;
    font-size: 2.5vh;
    text-transform: lowercase;
}
.com-about{
width: 40vw;
height: 40vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.com-about h6{
    font-size: 2.2vw;

    font-family: "ubuntu",sans-serif;
}
.com-about p{
    font-size: 1vw;
    color: #cbc5c5;
    font-family: "raleway",sans-serif;

}
.com-about p span{
    font-size: 1.2vw;
    color: white;
}

/*media quary*/



@media (max-width:480px){
     body{
        overflow-x: hidden;
    }
nav{
    height: 8vh;
    width: 100vw;
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-direction: row;
    background-color:  #4B8BBE;
    overflow-x: hidden;
    /*position: absolute;*/

    
}
html{
    overflow-x: hidden;
}
header{
    overflow-x: hidden;
}
ul{
    height: 70vh;
    width: 100vw;
        background-color:  #4B8BBE;

    display:flex ;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 3.4vw;
    font-weight: bolder;
    position: absolute;
    left: -100vw;
    top: 0;
    transition:all .6s ease-in-out;
    transform-origin: top;
} li a{
    text-decoration: none;
    color: white;
     padding: 1.6vw 5.5vw;
        font-family: sans-serif;


}

li{
    list-style: none;
   padding: 1vw;
}
h1{
    font-size: 5vw;
    font-family: 'Ubuntu', sans-serif;
    color: #ffffff;
    height: 10vh;
    width: 32vw;
    margin-left: -5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    margin-left: 5vw;
    
}
h1 span{

    color: #ffcc00;
    font-size: 5vw;
    padding-right: 1vh;

}

.active{
    background-color:#ffcc00;
    color: black;
    border-radius: 4vh;
}
       li a:hover{

            background-color:#ffcc00;
           
            border-radius: 4vh;
        }
        .name{
            width: 100vw;
            height: 100vh;
            display:flex;
            align-items: center;
            justify-content: center;
        
        }
        .front{
            height: 60vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }
        .right{
            height: 40vh;
            width: 100vw;
            background-image: url("front-removebg-preview.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
        }
        .left{
            height: 30vh;
            width: 60vw;
            display: flex;
            flex-direction: column;
             align-items: center; 
            justify-content: center;
             text-align: justify; 
        }
        .left h3{
            font-family: 'Ubuntu', sans-serif;   
             font-size: 8vw;
                color: rgb(2, 57, 70);
                text-transform: uppercase;
            }
            .left span{
                font-size: 2.5vw;
                font-family: 'Raleway', sans-serif;
                font-weight: 100;
            }
    #menu{
        font-size: 6vw;
        color: white;
        position: absolute;
        right: 4vw;
        top: 5vw;
        display: block;
    }
     #menu2{
        font-size: 6vw;
        color: white;
        position: absolute;
        right: 2vw;
        top: 5vw;
         visibility: hidden;
    }
 
li{
	list-style: none;
    margin-top: 6vw;
}
.name{
	width: 100vw;
	height: 100vh;
	display:flex;
	align-items: center;
	justify-content: center;


}


.text{
   position: absolute;
    top: 60vw;
    left: 4vw;
    margin: 0;
/*    font-weight: 300;*/
    display: flex;
    flex-direction: column;
    width: 40vw;
/*
    height: 100vh;
    background-color: rgba(147, 194, 235, 0.63)
*/

}
h3{
        font-family: 'Mochiy Pop One', sans-serif;
            font-family: monospace;

    font-size: 5vw;
    color: white;
/*background-color: antiquewhite;*/
/*    margin-top: 10vw;*/
}
.about{
    font-size: 3.5vw;
    font-family: monospace;
    margin-left: 2vw;
        margin-right:  5vw;
        font-family: "raleway",sans-serif;

}
span{
    font-size: 2vw;
}
.shadow{
    position: absolute;
    height: 60vh;
    width: 50vw;
    background-color: hsla(307, 30%, 54%, 0.61);
    
    z-index: 1;
}




.parent{
    
    height: 300vh;
    width: 100vw;
/*    background-color: aqua;*/
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.maincon{
    height:250vh;
    width: 100vw;
/*    background-color: blanchedalmond;*/
    display: flex;
    flex-direction: column;
/*    justify-content: flex-start;*/
        justify-content: center;

}

 .box{ 
	display:flex;
     justify-content: center;
height:260vh;
width: 100vw;
display: block;

 } 
.container{
	width: 100vw;
	height:260vh;
	
/*	 background-color: #a1e279; */
/*   display: flex;*/
/*	display: grid;
	grid-template-rows:repeat(12,30vh);
	grid-template-columns:65vw;
	grid-column-gap: 10vw;
	grid-row-gap: 10vw; 
	 justify-content:space-around; 
     place-item:center;
*/


}
.container a{
    float: left;

}
h2{
	margin-left:6vh ;
	font-size:8vw ;
    border-left: 4vw solid   #4B8BBE;
    padding-left: 2vw;
    margin-top: 10vw;

}

/*
@keyframes max1{
    0%{
        width: 1vw;
        color: #d44444;
    }
    100%{
            width:  45vw;
        color: #0c87f2;
    }
}
*/
.gallery{
height: 30vh;
width: 65vw;
border: 1px solid    grey;
/* justify-content: center; 
/* float: left; */
border-radius: 1vw;
box-shadow: .5vw .5vw .5vw rgba(144, 144, 140, 0.71);


}
img{
	width: 60vw;
	height: 25vh;
	margin: .5vw 1vw  0  1.5vw;
	/* justify-items: center; */
}
figcaption{
	text-align: center;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 
	font-size: 4vw;

}
h4{
	font-size: 6vw;
	 margin-left: -5vw; 
        border-left: 3vw solid   #4B8BBE;
padding-left: 2vw;
    position: relative;
    display: block;
}



.para{
	margin-top: 0vw;
	text-align: justify;
    height: 90vh;
align-items: flex-start;

}
.sub-para{
    width: 95vw;
height:90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}



footer{
    height: 50vh;
    width: 100vw;
    background-color: #000000e2;
    color: aliceblue;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-family: sans-serif;
}
.foot2{
    height: 20vh;
    width: 100vw; 
    display: flex;
    flex-direction: column;
}
.foot3{
    height: 20vh;
    width: 100vw; 
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: justify;
}
footer h5{
    font-size: 2.5vw;
}
.foot1  span{
    font-size: 1.8vw;

}
.foot2 h6{
    font-size: 2.5vw;
}
.foot2  span{
    font-size: 2vw;
    margin-left: 2vw;
}
#email{
     text-transform: lowercase;
/*    cursor: pointer;*/
    font-size: 1.8vw;
   
}
a i{
    transition: all 1s linear;
    box-shadow: 2px 2px 2px #b4adad;
}
a:hover i{
/*    font-size: 3vw;*/
    transform: scale(1.1);
    
}
.social{
    font-size: 1.8vw;
    margin: 0vw 0vw 1vw 2vw;
/*padding-right: 7vw;*/
}
.foot3 a{
    margin-left: 1vw;
        margin-top: 1vw;

}
.foot2 i{
    margin-right: 1vw;
}
.foot3 a i{
    color:rgb(25, 239, 41); font-size:2vw; background-color:rgb(66, 63, 63); padding:1.5vw; border-radius:1vh;
    
}
.foot3 a i:hover{
    background-color: #fff;
    transition: none;
}
.face{
     color:rgb(11, 109, 19);
}
#loc{
    font-size: 3vw;
    padding-left: 2vh;

}
#upper{
    color:rgb(25, 239, 41); font-size:3vw; background-color:black; padding:1.5vw; border-radius:50%; position: fixed; top: 50vh; right: 5vw; z-index:2;
}
.con{
    width: 100vw;
    height: 10vh;
    /* background-color: #fff; */

    display: flex;
    /* justify-content: space-evenly; */
    align-items: center;
}
.con i{
    color:white; font-size: 3vw;
     background-color: #595c5c; border-radius: 50%;
      padding: 2vh;
      margin-left: 2vw;
      /* text-align: justify; */
}
.con span{
    color: white;
    font-size: 2.5vh;
    text-transform: lowercase;
}
.com-about{
width: 90vw;
height: 10vh;
display: flex;
flex-direction: column;
justify-content: space-around;
text-align: justify;
}
.com-about h6{
    font-size: 4vw;

    font-family: "ubuntu",sans-serif;
}
.com-about p{
    font-size: 2.2vw;
    color: #cbc5c5;
    font-family: "raleway",sans-serif;

}
.com-about p span{
    font-size: 2.2vw;
    color: white;
}
 .foot3 .ab2 a{
margin-left: 2vw;
 }
}