/* CSS Document */
body{
	margin: 0px;
	padding: 0px;
	background-color:#eeeeee;
}
ul{
	list-style:none;
}
a{
	text-decoration:none;
}
*{
	box-sizing:border-box;
}
.main{

	height:100vh;
	background-image:url("../images/bg.png");
	background-position:bottom;
	background-repeat: no-repeat;
	background-size:cover;
	
	
		
}
.menu-left, .user-profile {
	display:flex;
	
}
.menu-left a {
	color: #4a5057;
	font-size: 16px;
	margin: 0px 15px;
	font-family: myriad pro regular;
	font-weight: 600;
}
.menu-left img{
	height: 18px;

}

.sign-in ,.sign-out {
	width:100px;
	height: 35px;
	border-radius: 10px;
	border:1px solid #3d3d3e;
	color:#3d3d3e;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: calibri;
	font-weight: bold;
	box-shadow:  2px 2px 6px rgba(0,0,0,0.1);
	
}


#user-profile img:not([class*='arrow'],[class*='default-user']) {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	margin-right: 5px;
	border-color: #000;
	
}

#user-profile .default-user {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	margin-right: 5px;
	border-color: #000;
	border: 3px solid #4285f4;
	
}

.user-profile p {
	color: #4a5057;
	font-size: 16px;
	margin: auto;
	font-family: myriad pro regular;
	font-weight: 600;
	text-align: center;
	
}


.setting-menu{
	position: absolute;
	width: 90%;
	max-width: 250px;
	height: 180px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0,0, 0, 0.4);
	border-radius: 4px;
	overflow: hidden;
	top:108%;
	right: 5%;
	max-height: 0;
	transition: max-height 0.3s;
	z-index: 1;
}

.setting-menu-height{
	max-height: 180px;
}

.user-profile a {
	font-size: 12px;
	color: #1876f2;
	text-decoration: none;
}

 .setting-menu-inner {
	 padding: 20px;
 }

 .setting-menu hr {
	 border: 0;
	 height: 1px;
	 background: #9a9a9a; 
	 margin: 15px;
 }

 .setting-links {
	 display: flex;
	 align-items: center;
	 margin: 15px 0;
 }

 .setting-links .settings-icon{
	width: 38px;
	margin-right: 10px;
	border-radius: 50%;
 }

 .setting-links a {
	 display: flex;
	 flex: 1;
	 align-items: center;
	 justify-content: space-between;
	 text-decoration: none;
	 color: #626262;
	 
 }

nav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 60px;

}
.sign-in:hover , .sign-out:hover {
	background-color:#1876f2;
	color:#FFFFFF;
	transition: all ease 0.2s;
	text-decoration: none;
}
.box{
	width: 220px;
	height: 310px;
	border-radius: 5px;
	box-shadow: 2px 6px 30px rgba(0,0,0,0.1);
	background-color:#f6f6f6;
	margin: 30px 30px;
	position:relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;


}
.user{
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color:#3d3d3e;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}
.box p{
	font-family: calibri;

	text-align: center;
margin: 0px;
	padding: 0px;
	
	
	color: #3d3d3e;
}
.slide-details p:nth-child(1){
	font-size: 23px;
	font-weight: 700;
	
}
.slide-details p:nth-child(2){
	font-size: 18px;
	

}
.slide-details{
	position: absolute;
	left: 50%;
	top: 20%;
	width:100%;
	transform: translate(-50%,-20%);
}
.box-img01{
	background-image:url("../images/1.png");
}
.box-img02{
	background-image:url("../images/2.png");
}
.box-img03{
	background-image:url("../images/3.png");
}
.box-img04{
	background-image:url("../images/4.png");
}
.box-img05{
	background-image:url("../images/5.png");
}
.box-img06{
	background-image:url("../images/6.png");
}
.user-img01{
	background-image: url("../images/srn.jpg");
	
}
.user-img02{
	background-image: url("../images/srn.jpg");
	
}
.user-img03{
	background-image: url("../images/srn.jpg");
	
}
.user-img04{
	background-image: url("../images/srn.jpg");
	
}
.user-img05{
	background-image: url("../images/srn.jpg");
	
}
.user-img06{
	background-image: url("../images/srn.jpg");
	
}

.g-heading span{
	width: 30px;
	height: 30px;
	background-color:#1876f2;
	display: flex;
	border-radius: 10px;
}
.graphics{
		font-family: calibri;
	position:absolute;
	left: 30px;
	bottom: 20px;
	width:200px;
	
}
.g-heading p{

	font-weight: bold;
	font-size: 20px;
	color: #3d3d3e;
	margin: 0px 10px;
	line-height: 25px;
	
	
}
.g-heading{
	display: flex;
	align-items: center;
}
.g-details {
	font-size: 14px;
	margin: 10px 0px;
	color: #3d3d3e;
}


.p-heading,
.t-heading,
.s-heading{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.p-heading p:nth-child(1),
.t-heading p:nth-child(1),
.s-heading p:nth-child(1){
	font-family:Magmawave Caps ;
	font-weight: bold;
	font-size: 25px;
	color: #3d3d3e;
	width:40%;
	text-align: center;
	margin:10px;
}
.p-heading p:nth-child(2),
.t-heading p:nth-child(2),
.s-heading p:nth-child(2){
	font-family: myriad pro;
	font-size: 14px;
	color:#9f9e9e;
	margin-top: 0px;
}

.s-heading{
	margin: 0px 0px 30px 0px;
}
.s-box {
	width: 220px;
	padding: 20px;
	background-color: #ffffff;
	box-shadow: 1px 2px 12px rgba(0,0,0,0.1);
	display: flex;
	text-align: center;
	flex-direction: column;
	align-items: center;
	margin:10px 5px;
	border-radius: 10px;
}
.s-icon{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #313131;
	margin: 10px;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
}
.s-box a{
	font-family: myriad pro;
	font-weight: bold;
	color:#313131;
	font-size: 18px;
	margin: 10px 0px;
}
.s-box p{
	font-family: myriad pro;
	color:#313131;
	font-size: 14px;
}
.price-button,
.service-button{
	width:140px;
	height: 35px;
	border:none;
	outline:none;
	border-radius:20px;
	color:#1876f2;
	border:1px solid #1876f2;
}
.price-button:hover,
.service-button:hover{
	color:#ffffff;
	background-color:#1876f2;
	transition: all ease 0.5s;
}

.services-container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.services{
	padding-top: 30px;
}

.front-icon{
	background-image:url("../images/gmp.png");
}
.back-icon{
	background-image:url("../images/google_cloud.png");
}
.seo-icon{
	background-image:url("../images/adobeanalytics.jpg");
}
.gui-icon{
	background-image:url("../images/aws_logo.png");
}

.ink-icon{
	background-image:url("../images/music.png");
}
.community-icon{
	background-image:url("../images/facebook.png");
}
.dashboard-icon{
	background-image:url("../images//dashboard.jpeg");
}
.compute-icon{
	background-image:url("../images/compute.png");
}



.team-img{
	width:100px;
	height: 100px;
	border-radius: 50%;
	background-color: #3d3d3e;
	margin: 15px 0px ;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.t-id {
	font-family: myriad pro;
	
	
}
.t-id a{
	font-size: 18px;
	color:#3d3d3e;
	font-weight: bold;
}
.t-id p{
	font-size: 14px;
	color:#9f9e9e;
	margin: 0px;
}
.team-box{
	margin: 0px 30px 30px 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}
.t-box-container{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}
.t-img1{
	background-image: url("../img/nuttakorn.png");
}
.t-img2{
	background-image:url("../img/songpon.jpeg");
}
.t-img3{
	background-image: url("../img/nipon.jpeg")
}
.t-img4{
	background-image: url("../img/teera.jpeg");
}

.t-img5{
	background-image: url("../img/toy_data_rockie.jpg");
}




.contact{
	width:100%;
	height: 200px;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	background: rgb(210,224,227);
	background: linear-gradient(90deg, rgba(210,224,227,1) 0%, rgba(233,231,224,1) 100%);
	font-family: myriad pro;
}
.contact h1{
	color:#0a2437;
	font-size: 26px;
margin: 5px;

}

.contact-btn{
	width: 150px;
	height: 40px;
	border-radius: 20px;
	background-color: #1876f2;
	border:none;
	outline: none;
	color:#ffffff;
	margin: 10px;
}

.palns{
	margin: 2% 0px 0px 0px;
}
.p-box{
		width: 220px;
	height: 310px;
	border-radius: 10px;
	background-color:#ffffff;
	box-shadow: 2px 2px 12px rgba(0,0,0,0.1);
	margin: 30px 5px;
	font-family: myriad pro;
	display: flex;
	flex-direction:column;
	align-items: center;
	justify-content: space-evenly;
	padding: 20px 0px;
}
.p-box-conatiner{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.p-box-heading{
	font-family: myriad pro;
	font-weight: bold;
	color: #3d3d3e;
	font-size:18px;
}
.price a{
	color:#1876f2;
	font-size: 25px;
	font-weight: bold
}
.price p{
		color: #3d3d3e;
	font-size:14px;
	margin: 0px;
	font-weight: bold;
	
}
.price{
	text-align: center;
}
.p-box-details{
	color: #3d3d3e;
	font-size:14px;
	text-align: center;
	
}

button:active{
	transform: scale(1.1);
}


footer{
	background: rgb(23,23,23);
	background: linear-gradient(90deg, rgba(23,23,23,1) 0%, rgba(25,25,25,1) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.dw-footer ul{
	font-family: calibri;
	margin:0px;
	padding:0px 20px;
	
}
.dw-footer h1{
	color: #9697A0;
	font-size:20px;
	font-family: calibri;
}
.dw-footer ul li a{
	font-size: 16px;
	color:#575A70;
}

.dw-footer{
	display: flex;
	justify-content:space-between;
	padding:3% 0px;
	margin:5px;
	width:80%;
	flex-wrap: wrap;
	
}

.social-icons{
	display:flex;
}
.social-icons a{
	width: 35px;
	height:35px;
	margin:0px 5px;
	background-color:#424356;
	box-shadow:2px 2px 12px rgba(0,0,0,0.1);
	display: flex;
	justify-content: center;
	align-items: center;
}

.social-icons i{
	color:#FFFFFF;
	font-size: 14px;
	
}

.search input{
	height:35px;
	width:200px;
	text-align: center;
	box-shadow:2px 2px 12px rgba(0,0,0,0.1);
	border:none;
	outline:none;
}
.copyright{
	font-family: calibri;
	font-size:12px;
	margin:10px;
	margin-bottom: 0px;
	text-align: center;
	color: #B3B3B3;
}
.dw-footer ul li a:hover{
	color:#9697A0;
	
}
.social-icons a:hover{
	background-color:#9a9ff6;
	transition: all ease 0.5s;
}

.social-icons a:hover i{
	color: #424356;
}

@media(max-width:1024px){
	.search{
		margin:20px auto;
		display:flex;
		align-items: center;
		width: 100%;
		justify-content: center;		
	}
	.search h1{
		margin:20px;
	}
	.s-box,
	.p-box{
		flex-grow:1;
		margin: 5px;
	}
	.s-box:nth-child(4),
	.p-box:nth-child(4){
		width: 100%;
		
		
	}
	
	.p-box:nth-child(4){
		height: 250px;
	}
	
}
	
@media(max-width:720px){
	
	.menu-left a{
		margin:0px 10px;
		font-size:14px;		
	}
	nav{
		padding:15px 30px;
	}
	.sign-in{
		height: 30px;
		width: 80px;
		font-size: 12px;
	}
	.s-box p,
	.service-button{
		display:none;
	}
	
	.s-box{
		flex-direction: row;
		width: 100%;
		padding: 5px;
	}
	.s-box:hover{
		transform:scale(1);
		/* background-color:; */
	}
	.services{
		background-image: none;
	}
	.s-heading p:nth-child(2){
		color:#9f9e9e;
	}
	.s-heading p:nth-child(1){
		color:#3d3d3e;
	}
	.s-icon{
		height:40px;
		width: 40px;
	}
	.s-box a{
		font-size:16px;
		margin: 0px 15px;
	}
	
	.team-img{
		width: 60px;
		height: 60px;
	}
	.team-box{
		margin:0px 10px 30px 10px;
	}
	.t-id a{
		font-size: 14px;
	}
		.t-id p{
		font-size: 12px;
	}
	.contact{
		height:150px;
	}
	.contact h1{
		font-size:18px;
	}
	.contact button{
		height: 33px;
		width: 120px;
		font-size: 12px;
	}
	.p-box{
		width:80%;
		margin: 10px;
		
	
	}
	.p-heading p{
		width: 80%;
	}
	.dw-footer{
		flex-direction: column;
		align-items:center;
		text-align:center;
		
	}
	.dw-footer ul h1{
		font-size: 25px;
	}
	.dw-footer ul li{
		text-align: center;
		margin:10px;
		
	}
	.dw-footer ul li a{
		
		font-size: 20px;
	}
	.f-logo{
		border: 1px solid #545562;
	}
	.search{
		display: block;
	}
}

.policy-border {
	padding-top: 10px;
}