/* FONTS

font-family: 'Dancing Script', cursive;
font-family: 'Kanit', sans-serif;
font-family: 'Mynerve', cursive;
font-family: 'Nunito Sans', sans-serif;
font-family: 'Pacifico', cursive;
font-family: 'Roboto', sans-serif;
font-family: 'WindSong', cursive;\
*/





* {
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}

.container ul li a {
	color: inherit;
	text-decoration: none;
	font-family: 'Kanit', sans-serif;
}

.container h1 a {
	color: inherit;
	text-decoration: none;
	font-family: 'Dancing Script', cursive;
}

.medsos {
	z-index: 1000;
	padding: 5px 0;
	background-color: #27374D;
	/* background-image: linear-gradient(blue, cyan, darkblue, lightblue); */
}

.medsos ul li {
	display: inline-block;
	color: #fff;
	margin-right: 10px;
}

.container {
	width: 95%;
	margin: 0 auto;
}

.container-label {
	width: 100%;
	margin: 0 auto;
}

.container:after {
	content: '';
	display: block;
	clear: both;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	/* display: block; */
	/* position: absolute; */
	background-color: #333;
}

header h1 {
	float: left;
	padding: 15px 0;
	color: #526D82;
}

header ul {
	float: right;
}

header ul li {
	display: inline-block;
}

header ul li a {
	padding: 25px 20px;
	display: inline-block;
}

header ul li a:hover {
	background-color: #9DB2BF;
	color: #fff;
	width: auto;
}

.active {
	background-color: #526D82;
	color: #fff;
	width: auto;
}

.banner {
	height: 60vh;
	background-image: url('../img/banner.jpg');
	background-size: cover;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* .banner2{
	height: 60vh;
	background-image: url('../img/cover-image.png');
	background-size: cover;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
} */
.banner::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #9db2bf71;
}

.container-oval {
	z-index: 100;
	padding: 0;
	margin-right: 30px;
}

.oval-image2,
.oval-image {
	width: 20vw;
	height: auto;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 3px 3px 10px gray;
	border: 5px solid #43587586;
}

/* PROJECT PARTS */
.main-content {
	display: flex;
	justify-content: flex-start;
	margin: 20px;
	justify-content: center;
	margin-right: auto;
	margin-left: auto;
}

.content {
	/* margin-left: 10%; */
	max-width: 65%;
}

.article-title {
	text-align: center;
	font-size: 30px;
	margin: 50px 0 30px;
}

.project-title {
	font-size: 20px;
	margin: 15px;
	color: #27374D;
	font-weight: bold;
	font-family: 'Kanit', sans-serif;
}

.project-description {
	margin: 5px;
	color: black;
	/* font-weight: bold; */
	font-family: 'Kanit', sans-serif;
}

.project-container {
	display: flex;
	justify-content: space-around;
}

.project {
	margin: 10px 30px;
	border-bottom: 10px solid #27374D;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	box-shadow: 0 0 10px gainsboro;
	background-color: #DDE6ED;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(90,720,350)'%3E%3Cstop offset='0' stop-color='%23DDE6ED'/%3E%3Cstop offset='1' stop-color='%239DB2BF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
	/* background-attachment: fixed; */
	background-size: cover;
}

.project-img {
	border-radius: 20px;
	box-shadow: none;
}

.style1 {
	color: #F1F6F9;
	font-size: medium;
	background-color: rgba(53, 175, 175, 0.411);
	padding: 10px;
	border-radius: 10px;
	font-size: 20px;
	font-family: 'Mynerve', cursive;
}

.style2 {
	background-color: #39486757;
	padding: 5px 5px 2px 5px;
	border-radius: 10px;
	font-family: 'Mynerve', cursive;
}

.jumbo {
	color: #fff;
	text-align: center;
	z-index: 1000;
	padding: 30px 35px;
	border: 3px solid #fff;
	border-radius: 20px;
	box-shadow: 3px 3px 5px gray;
	font-family: 'Mynerve', cursive;
	text-shadow: 3px 3px 3px black;
	font-size: 25px;
}

h1 {
	font-family: 'Kanit', sans-serif;
}

section {
	padding: 50px 0;
}

section h3 {
	text-align: center;
	padding: 20px 20px;
	color: white;
	margin-bottom: 25px;
	background-color: #27374d85;
	width: fit-content;
	margin: 10px auto 30px;
	border-radius: 20px;
	box-shadow: 3px 3px 10px gray;
	font-family: 'Kanit', sans-serif;
	text-shadow: 3px 3px 3px black;
	font-size: 30px;
	/* border: 1px solid black; */
}

.my-project h3 {
	text-align: center;
	padding: 20px 20px;
	color: white;
	margin-bottom: 25px;
	background-color: #27374d85;
	width: fit-content;
	margin: 10px auto 30px;
	border-radius: 20px;
	box-shadow: 3px 3px 10px gray;
	font-family: 'Kanit', sans-serif;
	text-shadow: 3px 3px 3px black;
	font-size: 30px;
	/* border: 1px solid black; */
}

.about {
	margin: 30px;
	border-radius: 20px;
	box-shadow: 3px 3px 10px rgb(75, 75, 75);
	padding-bottom: 100px;
	background-image: url('../img/cover-image4.png');
	background-size: cover;
}

/* .about p:nth-child(even){
	text-align: right;
}
.about p:nth-child(odd){
	text-align: left;
} */
.aboutPage {
	margin: 30px 0px;
	border-radius: 20px;
	/* box-shadow: 3px 3px 10px rgb(75, 75, 75); */
	padding-bottom: 0px;
	/* background-image: url('../img/bgsect.png'); */
	background-size: cover;
}

.service {
	margin: 30px;
	border-radius: 20px;
	box-shadow: 3px 3px 10px rgb(75, 75, 75);
	background-image: url('../img/cover-image3.png');
	/* padding-bottom: 100px; */

	/* background-image: linear-gradient(to bottom right, gainsboro, lightgray, lightgrey, silver, darkgray, darkgrey, gray, grey, dimgray, silver, ); */

	/* background-color: #9DB2BF;
	opacity: 0.7;
	background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #9DB2BF 40px ), repeating-linear-gradient( #DDE6ED55, #DDE6ED ); */
	/* background-size: cover; */
}

.servicePage {
	margin: 30px;
	border-radius: 20px;
	padding-bottom: 100px;
	background-size: cover;
}


.about-bg {
	margin: 30px;
	border-radius: 20px;
	box-shadow: 3px 3px 10px rgb(75, 75, 75);
	background-image: url('../img/cover-image2.png');

	height: 60vh;
	background-size: cover;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.about .text-about {
	width: 70%;
	color: #666;
	margin-left: auto;
	margin-right: auto;
	word-spacing: 4px;
	line-height: 35px;
	margin-bottom: 20px;
	font-size: 23px;
	text-align: center;
	font-family: 'Pacifico', cursive;
	background-color: #6e878f3d;
	border-radius: 20px;
	padding: 30px 20px 20px 20px;
	text-shadow: 5px 5px 10px rgb(233, 227, 227);
	box-shadow: 3px 3px 5px gray;
	height: 270px;
	display: flex;
	justify-content: center;
}

.left-p {
	margin-right: 20px;
	text-align: left;
}

.right-p {
	margin-left: 20px;
	text-align: right;
}

.about p,
strong {
	font-family: 'Pacifico', cursive;
}

.box {
	color: #39393a;
	background-color: #90909191;
	border-radius: 20px;
	box-shadow: 3px 3px 5px gray;
	padding: 35px 5px;
	display: flex;
	justify-content: center;
}

.box:after {
	content: '';
	display: block;
	clear: both;
}

.box .col-1,
.box .col-2,
.box .col-3,
.box .col-4 {
	width: 30%;
	padding: 25px;
	margin: auto 10px;
	box-sizing: border-box;
	/* background-color: gainsboro; */
	background-image: url('../img/about.jpg');
	background-size: cover;
	justify-content: space-between;
	text-align: center;
	float: left;
	border-radius: 20px;
	border: 2px solid rgb(171, 173, 173);
	box-shadow: 4px 4px 10px rgb(68, 68, 68);
}

.box .col-1 p,
.col-2 p,
.col-3 p,
.col-4 p {
	padding: 5px;
	box-shadow: 0 0 10px rgba(189, 189, 189, 0.336);
	border-radius: 5px;
	background-color: #9DB2BF;
	color: #1f3342;
	text-shadow: 3px 3px 3px gray;
	font-size: 20px;
}

.box .col-1 h4,
.box .col-2 h4,
.box .col-3 h4,
.box .col-4 h4 {
	margin: 20px 0;
	text-shadow: 3px 3px 5px gray;
	font-size: 20px;
}

.skills-flex {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 50px;
}

.icon {
	width: 70px;
	height: 70px;
	border: 1px solid;
	border-radius: 50%;
	text-align: center;
	line-height: 70px;
	font-size: 20px;
	margin: 0 auto;
}






/* Skills & Activity */
body {
	background-image: url('../img/bg.png');
	background-size: cover;
}

.section-container {
	text-align: center;
	padding: 10px;
}

.section-subtitle {
	font-size: 15px;
	color: gray;
	margin: 10px 0 0;
}

.about-flex-item {
	display: block;
}

.about-image {
	margin: 0;
	/* position: relative; */
	width: 100%;
}

.blob-image {
	/* position: absolute; */
	max-width: 35%;
	height: auto;
	/* left: 50%; */
	transform: rotate(-90deg);
}

.blogger-image {
	position: absolute;
	max-width: 15%;
	height: auto;
	left: 43%;
	top: 33%;
}

.skills-flex {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 50px;
}

.skill-item {
	box-shadow: 3px 3px 5px gray;
	border-radius: 20px;
	padding: 15px;
	background-color: white;
	background-image: url('../img/about.jpg');
	background-size: cover;
}

.skill-item img {
	width: 200px;
	height: 180px;
	margin: 10px;
}

.skill-item p {
	padding: 5px;
	box-shadow: 0 0 10px gainsboro;
	border-radius: 5px;
	background-color: #a5b1b9;
	color: #1f3342;
	text-shadow: 3px 3px 3px gray;
	font-size: 20px;
	font-family: 'Kanit', sans-serif;
}

.skill-item h4 {
	font-family: 'Kanit', sans-serif;
}

.activity-flex {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px;
	justify-content: center;
}

.activity-item {
	padding: 20px;
	background-color: white;
	box-shadow: 0 0 3px gainsboro;
	border-radius: 20px;
	margin: 10px;
	background-image: url('../img/about.jpg');
	background-size: cover;
}

.activity-item img {
	width: 350px;
	height: auto;
	border-radius: 20px;
}





/* FOOTER */
footer {
	padding: 30px 0;
	background-color: #27374D;
	color: #fff;
	text-align: center;
}

/* .bg-loader {
	background-color: #eee;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bg-loader .loader {
	width:100px;
	height: 100px;
	border:3px solid #fff;
	border-radius: 50%;
	border-top-color: #148F77;
	border-right-color: #148F77;
	border-bottom-color: #148F77;
	animation: puterin .8s linear infinite;
} */
.label {
	background-color: #27374D;
	color: #fff;
	/* width: auto; */
	height: 0px;
}

small {
	font-family: 'Kanit', sans-serif;
}







/* Responsive web */


@media(max-width:1024px) {
	.contact-container {
		justify-content: center;
	}

	.illustration-img {
		display: none;
	}
}








@media (max-width: 900px) {

	/* General */
	* {
		/* font-size: 2.5vw; */
		padding: 0px;
		margin: 0px;
	}

	.container {
		width: 90%;
	}


	/* Header */
	header h1 {
		font-size: 3vw;
		left: 0;
		font-size: 3vw;
	}

	header ul {
		font-size: 2.0vw;
		right: 0;
		position: absolute;

	}


	/* Main */
	.banner {
		display: flex;
		position: relative;
		justify-content: center;
	}

	.banner h1,
	span {
		font-size: 3.5vw;
		margin: 5px;
	}

	.oval-image,
	.oval-image2 {
		width: 30vw;
	}

	.my-project h3 {
		font-size: 2.5vw;
	}

	.project-container {
		display: block;
	}

	.project {
		margin-bottom: 20px;
	}

	.jumbo {
		width: fit-content;
		right: 20px;
	}

	.service {
		margin: 0;
		border-radius: 20px;
		box-shadow: none;
		background-image: url('../img/cover-image3.png');
	}

	.box {
		margin: 0;
		display: block;
		flex-wrap: wrap;
		justify-content: center;
	}

	.box .col-1,
	.box .col-2,
	.box .col-3,
	.box .col-4 {
		margin: 10px;
		width: 20vw;
		height: 30vw;
		margin-bottom: 20px;
	}

	.box .col-1 p,
	.col-2 p,
	.col-3 p,
	.col-4 p {
		font-size: 2vw;
	}

	.box .col-1 h4,
	.box .col-2 h4,
	.box .col-3 h4,
	.box .col-4 h4 {
		font-size: 2vw;
	}

	.banner {
		justify-content: center;
	}

	.illustration-img {
		display: none;
	}

	.profile-contact-img {
		width: 30%;
	}

	.page-title h1 {
		font-size: 4vw;
	}

	.project-detail {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: fit-content;
	}

	.project-detail img {
		justify-content: center;
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 98%;
		max-height: 80%;
	}

	.project-detail .project-img {
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
		display: block;
		border-radius: 20px;
		box-shadow: none;
	}

	.project-description h3 {
		font-size: 2vw;
		text-align: center;
	}

	.about .container h3{
		font-size: 3vw;
	}

	.project-description p {
		font-size: 2vw;
	}

	.rocket-container {
		display: none;
	}

	.contact-container {
		justify-content: center;
	}

	.illustration-img {
		display: none;
	}

	.contact {
		display:contents;
		margin:0;
		text-align: center;
		justify-content: center;
	}

	.about .container .text-about .left-p, 
	.about .container .text-about .right-p{
		font-size: 2vw;
		line-height: 120%;
	}
}




@media (max-width: 768px) {

	/* General */
	* {
		/* font-size: 2.5vw; */
		padding: 0px;
		margin: 0px;
	}

	.container {
		width: 90%;
	}


	/* Header */
	header h1 {
		font-size: 3vw;
		left: 0;
		font-size: 3vw;
	}

	header ul {
		font-size: 2.0vw;
		right: 0;
		position: absolute;

	}


	/* Main */
	.banner {
		display: flex;
		position: relative;
		justify-content: center;
	}

	.banner h1,
	span {
		font-size: 3vw;
	}

	.style1 {
		color: #F1F6F9;
		font-size: 4vw;
		background-color: rgba(53, 175, 175, 0.411);
		padding: 5px;
		border-radius: 10px;
	}

	.style2 {
		font-size: 4vw;
		padding: 3px;
	}

	.oval-image,
	.oval-image2 {
		width: 30vw;
	}

	.my-project h3 {
		font-size: 2.5vw;
	}

	.project-img {
		width: 35vw;
		height: 30vw;
	}

	.project-container {
		display: block;
	}

	.project {
		margin-bottom: 20px;
	}

	.jumbo {
		width: fit-content;
		right: 20px;
	}

	.service {
		margin: 0;
		border-radius: 20px;
		box-shadow: none;
		background-size: cover;
	}

	.box {
		display: flex;
		margin: 15px auto;
		flex-wrap: wrap;
		justify-content: center;
	}

	.box .col-1,
	.box .col-2,
	.box .col-3,
	.box .col-4 {
		margin-left: 15px;
		margin-right: 15px;
		width: 30vw;
		height: 250px;
		margin-bottom: 20px;
		justify-content: center;
	}

	.box .col-1 p,
	.col-2 p,
	.col-3 p,
	.col-4 p {
		font-size: 2vw;
	}

	.box .col-1 h4,
	.box .col-2 h4,
	.box .col-3 h4,
	.box .col-4 h4 {
		font-size: 2vw;
	}

	.banner {
		justify-content: center;
	}

	.illustration-img {
		display: none;
	}

	.profile-contact-img {
		width: 30%;
	}

	.contact-container {
		justify-content: center;
	}

	.illustration-img {
		display: none;
	}

	.about-bg {
		margin: 0px;
		border-radius: 20px;
		box-shadow: 3px 3px 10px rgb(75, 75, 75);
		background-image: url('../img/cover-image2.png');
	
		height: 60vh;
		background-size: cover;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
}





@media (max-width: 425px) {

	/* General */
	* {
		/* font-size: 2.5vw; */
		padding: 0px;
		margin: 0px;
	}

	.container {
		width: 90%;
	}

	header ul li a {
		padding: 20px 10px;
		display: inline-block;
	}

	/* Header */
	header h1 {
		font-size: 3vw;
		left: 0;
		font-size: 3vw;
	}

	header ul {
		font-size: 2.0vw;
		right: 0;
		position: absolute;

	}


	/* Main */
	.banner {
		display: grid;
		justify-content: center;
	}

	.container-oval,
	.jumbo {
		margin: 0 auto;
		display: block;
		justify-content: center;
	}

	.banner h1 {
		font-size: 4vw;
		margin: 5px;
	}

	.style1 {
		color: #F1F6F9;
		font-size: 4vw;
		background-color: rgba(53, 175, 175, 0.411);
		padding: 5px;
		border-radius: 5px;
	}

	.style2 {
		font-size: 4vw;
		padding: 5px;
	}

	.oval-image,
	.oval-image2 {
		width: 30vw;
	}

	.my-project h3 {
		font-size: 4vw;
	}

	.service .container h3 {
		font-size: 4vw;
	}

	.project-container {
		display: block;
	}

	.project {
		margin-bottom: 20px;
	}

	/* .jumbo {
		width: fit-content;
		right: 20px;
	} */
	.service {
		justify-content: center;
		width: 95%;
		margin: 0 auto;
		border-radius: 20px;
		box-shadow: none;
		background-size: cover;
	}
	.page-title h3{
		font-size: 3vw;
	}

	.box {
		display: flex;
		margin: 18vw auto;
		flex-wrap: wrap;
		justify-content: center;
	}

	.box .col-1,
	.box .col-2,
	.box .col-3,
	.box .col-4 {
		justify-content: center;
		margin: 0 10px;
		width: 30vw;
		height: 50vw;
		margin-bottom: 20px;
	}

	.box .col-1 p,
	.col-2 p,
	.col-3 p,
	.col-4 p {
		font-size: 2vw;
	}

	.box .col-1 h4,
	.box .col-2 h4,
	.box .col-3 h4,
	.box .col-4 h4 {
		font-size: 2vw;
	}

	.banner {
		justify-content: center;
	}

	.contact-container {
		justify-content: center;
	}
	.project-detail {
		display: flex;
		position: relative;
		flex-wrap: wrap;
		justify-content: center;
		/* width: fit-content; */
	}

	.illustration-img {
		display: none;
	}

	.contact .profile-contact-img {
		width: 30vw;
	}
	h1{
		font-size: 5vw;
	}
	p{
		font-size: 3vw;
	}
	.contact {
		display:inline-block;
		width: 80vw;
		margin:0;
		text-align: center;
		justify-content: center;
	}
	.about .container .text-about .left-p, 
	.about .container .text-about .right-p{
		font-size: 3vw;
		line-height: 120%;
	}
}