@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital@0;1&display=swap');

@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:ital,wght@0,100..900;1,100..900&display=swap');

/* font-family: "MuseoModerno", sans-serif; */


:root {
    --yellow: #FFC700;
    --red: #F92B3A;
    --green: #AEDF35;
	/* --blue: #2B388F; */
	--blue: #485eea;
	--grey: #323232;
	--white: #fff;
    --head-font: 'MuseoModerno', sans-serif;
    --body-font: 'Ubuntu', sans-serif;
}


html{
	font-family: var(--body-font);
	color: var(--grey);
	scroll-behavior: smooth;
}

body{
	font-family: var(--body-font);
	overflow-x: hidden;
	
}


* {
    line-height: 1.5;

}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--head-font);
    margin-bottom: 0.5rem;
}


h1, .h1 { font-size: 4.209rem }
h2, .h2 { font-size: 3.157rem }
h3, .h3 { font-size: 2.369rem }
h4, .h4 { font-size: 1.777rem }
h5, .h5 { font-size: 1.333rem }
h6, .h6 { font-size: 1rem }

p, ul, ol {
    margin-bottom: 1rem;
}








/* Layout */
section {
    margin: 2.5rem 0;
}

/* ul, ol {
    margin-left: 2rem;
} */

.container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 2000px){
	.container {
		max-width: 95rem;
	}
}

.project-container {
    max-width: 100%;
}
.about-container {
    max-width: 80%;
}


section.bg {
    padding: 4rem 0;
}


.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.grid > div {
    width: 100%;
    /* aspect-ratio: 1; */
    /* background-color: #22c55e;
    border-radius: 1rem; */
}








.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media screen and (max-width: 568px) {
    
    .col-1-sm { grid-column: span 1; }
    .col-2-sm { grid-column: span 2; }
    .col-3-sm { grid-column: span 3; }
    .col-4-sm { grid-column: span 4; }
    .col-5-sm { grid-column: span 5; }
    .col-6-sm { grid-column: span 6; }
    .col-7-sm { grid-column: span 7; }
    .col-8-sm { grid-column: span 8; }
    .col-9-sm { grid-column: span 9; }
    .col-10-sm { grid-column: span 10; }
    .col-11-sm { grid-column: span 11; }
    .col-12-sm { grid-column: span 12; }

}

@media screen and (max-width: 834px) {
    
    .col-1-md { grid-column: span 1; }
    .col-2-md { grid-column: span 2; }
    .col-3-md { grid-column: span 3; }
    .col-4-md { grid-column: span 4; }
    .col-5-md { grid-column: span 5; }
    .col-6-md { grid-column: span 6; }
    .col-7-md { grid-column: span 7; }
    .col-8-md { grid-column: span 8; }
    .col-9-md { grid-column: span 9; }
    .col-10-md { grid-column: span 10; }
    .col-11-md { grid-column: span 11; }
    .col-12-md { grid-column: span 12; }

}

@media screen and (min-width: 1080px) {
    
    .col-1-lg { grid-column: span 1; }
    .col-2-lg { grid-column: span 2; }
    .col-3-lg { grid-column: span 3; }
    .col-4-lg { grid-column: span 4; }
    .col-5-lg { grid-column: span 5; }
    .col-6-lg { grid-column: span 6; }
    .col-7-lg { grid-column: span 7; }
    .col-8-lg { grid-column: span 8; }
    .col-9-lg { grid-column: span 9; }
    .col-10-lg { grid-column: span 10; }
    .col-11-lg { grid-column: span 11; }
    .col-12-lg { grid-column: span 12; }

}



@media screen and (max-width: 1290px) {
    
    .col-12-xl { grid-column: span 12; }

}


@media (min-width: 1600px) {
    .col-1-xxl { grid-column: span 1; }
    .col-2-xxl { grid-column: span 2; }
    .col-3-xxl { grid-column: span 3; }
    .col-4-xxl { grid-column: span 4; }
    .col-5-xxl { grid-column: span 5; }
    .col-6-xxl { grid-column: span 6; }
    .col-7-xxl { grid-column: span 7; }
    .col-8-xxl { grid-column: span 8; }
	.col-9-xxl { grid-column: span 9; }
    .col-10-xxl { grid-column: span 10; }
    .col-11-xxl { grid-column: span 11; }
    .col-12-xxl { grid-column: span 12; }

}

@media (min-width: 568px) and (max-width: 834px) {
    
    .col-1-mds { grid-column: span 1; }
    .col-2-mds { grid-column: span 2; }
    .col-3-mds { grid-column: span 3; }
    .col-4-mds { grid-column: span 4; }
    .col-5-mds { grid-column: span 5; }
    .col-6-mds { grid-column: span 6; }
    .col-7-mds { grid-column: span 7; }
    .col-8-mds { grid-column: span 8; }
    .col-9-mds { grid-column: span 9; }
    .col-10-mds { grid-column: span 10; }
    .col-11-mds { grid-column: span 11; }
    .col-12-mds { grid-column: span 12; }

}





















/* header styles */
header{
	text-align: center;
	font-family: var(--head-font);
	position: fixed;
	z-index: 99;
	top: 30px;
	left: 0;
	right: 0;
	max-width: 100vw;
}




/* nav styles */

nav{
	text-align:center;
	max-width: 100vw;
}

nav ul li{
	display:block;
	margin-bottom:0;
	
} 

nav ul{
	display: flex;
	font-size: 1.2em;
	margin-top: 34px;
	justify-content: flex-end;
	height: 90px;
	margin:  0 auto;
	align-items: center;
}

nav a{
	display:block;
	padding: 20px;
	text-decoration: none;
	border-radius: 50px;
	margin-right: 5px;
}



.main-menu #logo{
    display: flex;
    position: absolute;
    left: 20px;
   }

 #logo img {
    width: 65px; 
	height: auto; 
}














/* menu  icon*/


.menu {
	width: 80px;
	height: 80px;
	/* margin: 10px; */
	margin-top: 5px;
	/* background-color: #ac204c; */
	cursor: pointer;
	position: relative; /* Ensure relative positioning */
	z-index: 99; /* Set a z-index value */
	display: block;
}

.menu div {
	width: 40px;
	height: 60px;
	margin: 10px;
	position: relative;
	/* background-color: rgb(32, 172, 69); */
}
.menu span {
	background: var(--grey);
	width: 100%;
	height: 10px;
	border-radius: 5px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	transition: transform 0.3s, width 0.3s;
}


.menu .line-1 {
	width: 50%;
	transform: translate(-50%, -25px) rotate(0deg);
}

.menu .line-3 {
	width: 50%;
	transform: translate(-50%, 15px) rotate(0deg);
}
.openmenu .line-1{
	transform: translate(-1px,2px) rotate(45deg);
}
.openmenu .line-2{
	transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3{
	transform: translate(-15px,-12px) rotate(45deg);
}



#navbar{
	display: block;
}

.main-menu{
	display: none;
}


@media (max-width: 834px){
	#navbar{
		display: none;
	}
	.main-menu{
		display: block;
	}
}









/* menu  box*/

.menu-box{
	position: fixed;
	top: 0;
	/* left: 100%; */
	right: 0;
	width: 0;
	height: 0;
	display: block;
	padding-top: 120px;
	z-index: 98;
	background-color: var(--yellow);
	/* transition: 0.4s; */
	border-bottom-left-radius: 100%;
	transition: width 0.5s, height 0.5s, border-radius 0.5s;
	
}

.menu-box.is-active{
	
	width: 100%;
	height: 100vh;
	/* left: 0; */
	border-bottom-left-radius: 0;
}

.menu-box.is-active ul li{
	opacity: 1;
	transform: translateY(0);
	transition: transform 1s, opacity 1s;
	transition-delay: 0.5s;
}


.menu-box ul li {
	list-style: none;
	margin: 20px;
	text-align: center;
	opacity: 0;
	transform: translateY(30);
}

.menu-box ul li a {
	display: inline-block;
	text-decoration: none;
	font-family: var(--head-font);
	color: var(--grey);
	font-size: 3rem;
	font-weight: 200;
	padding-bottom: 3rem;
	transition: text-shadow 0.5s, transform 0.5s;
	margin-left: -1rem;
	
}

.menu-box ul li a:hover {
	text-shadow: -2px 2px 5px var(--white);
	transform: translateY(-6px);
}

.menu-box ul li a::before {
	content: ''; 
	/* display: inline-block;  */
	/* width: 2rem; 
	height: 2rem;  */
	position: absolute;
		display: inline-flex;
		text-align: left;
		width: 2rem; 
		height: 2rem; 
		left: -30px;
		top: 10%;
	background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>'); 
	background-size: contain; 
	background-repeat: no-repeat;
	margin-right: 5px; 
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);

	opacity: 0;
}

.menu-box ul li a:hover::before {
	opacity: 1;
}


.menu-box ul li:nth-child(5) {
	display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
	width: 100%;
	bottom: 130px;
	margin: 0;
	padding-left: 0.4rem; 
}

.menu-box ul li:nth-child(5) a {
    font-size: 2rem;
}

.menu-box ul li:nth-child(5)  a::before {
    content: ''; 
    display: none;
}




/* .menu-box ul li:nth-child(4)  a::before {
    content: ''; 
    display: none;
} */


.menu-box ul li:nth-child(6) {
	display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
	width: 100%;
	bottom: 130px;
	margin: 0;
	padding-left: 0.4rem; 

}

.menu-box ul li:nth-child(6) a {
    padding-inline: 15px;

}

.menu-box ul li:nth-child(6)  a::before {
    content: ''; 
    display: none;
}








@media (max-width: 834px) {

	.menu-box.is-active ul li a{
	font-size: 1.5rem;
	}
	.menu-box ul li:nth-child(5) {
		margin: 0;
	
	}
	.menu-box ul li:nth-child(5) a {
		font-size: 1rem;
		
	}
	.menu-box ul li:nth-child(6) {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		position: absolute;
		width: 100%;
		bottom: 100px;
		margin: 0;
	}
	header{
		top: 5px;
	}
	.main-menu li{
		scale: 0.6;
	}
	
	.pjdetail{
		margin-top: 6rem;
	
	}
	.main-menu #logo {
		display: flex;
		position: absolute;
		left: -6%;
	
	}

	.menu{
		left: 40%;
	}
	}



/* ------ menu end -----*/





















/* Home style  */



section.home {
	max-height: 100vh;

	/* margin-top: 6rem;
	padding: 1rem; */
	
	text-align: center;
	font-family: var(--head-font);
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
}

section.home>.container {
	margin: auto;
	text-align: center;
	width: 100vw;
	/* max-width: 100vw; */
}



@media (max-width: 834px){
	#homemain{
	height: 100vh;
	aspect-ratio: 1;
	}
}



.herotext{
	text-align: left;

}
.herotext h1{
color: var(--yellow);
text-shadow: 2px 2px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);
font-weight: bold;	
}

@media (max-width: 834px){
	/* กลับมาแก้ */
	.herotext{
		margin-top: -10rem;
	}
}




.herohover {
	overflow: hidden;
	white-space: nowrap;
	width: 32%; 
	transition: width 0.5s ease-in-out;
}

.herohover:hover {
	width: 100%;
}



.herotext p{
	font-size: 1.2rem;
	line-height: 1.7rem;
	font-family: "MuseoModerno", sans-serif;
}

.heronent {
	background-color: var(--yellow);
}

.hitext{
	line-height: 0rem;
	margin-bottom: 0;
	padding-bottom: 0;
}
@media (min-width: 2000px){
	.herotext p {
		font-size: 1.7rem;
		line-height: 1.8rem;
	}
}

.expanding-text {
    display: inline-block;
}




.expanding-text h1 {
    margin: 0;
	padding-bottom: 1rem;
    overflow: hidden;
}

.expanded-text {
    display: inline-block;
    max-width: 0;
    white-space: nowrap;
    transition: max-width 0.5s ease-out;
}

@media (max-width: 834px){
	.expanded-text {
		display: none;
	}
}

.expanding-text:hover .expanded-text {
    max-width: 800px; 
	
}


@media (min-width: 2000px){
	.expanding-text h1{
		font-size: 6rem;
	}

	.expanding-text:hover .expanded-text {
		max-width: 900px; 
		
	}

}






.h-1 {
	/* height: 20rem; */
	/* padding-bottom: 1rem; */
	} 

.h-1 .t-1name1{
	color: var(--blue);
	font-size: 3rem;
}
.h-1 .t-1name1 a{
	color: var(--blue);
text-decoration: none;
position: relative;
}
.h-1 .t-1name1 a:before{
	content: "";
	position: absolute;
	bottom: -2px;
	height: 6px;
	width: 0px;
	background-color: var(--yellow);
	border-radius: 50px;
	transition: width 0.3s ease;
}

.h-1 .t-1name1 a:hover:before{
	width: 100%;
}





@media (max-width: 834px){
	.h-1 .t-1name1{
		font-size: 1.5rem;
	}
	.h-1 .t-1-1{
		font-size: 1rem;
	}
	.h-1 h4{
		font-size: 1rem;
	}

}


.h-1 .t-1name2{
	color: var(--green);
	font-size: 3rem;
	display: inline;
	padding-left: 1rem;
	filter:  saturate(150%) contrast(80%);
}
.h-1 .t-1name2 a{
	color: var(--green);
text-decoration: none;
position: relative;
}
.h-1 .t-1name2 a:before{
	content: "";
	position: absolute;
	bottom: -2px;
	height: 6px;
	width: 0px;
	background-color: var(--yellow);
	border-radius: 50px;
	transition: width 0.3s ease;
}

.h-1 .t-1name2 a:hover:before{
	width: 100%;
}







@media (max-width: 834px){
	.h-1 .t-1name2{
		font-size: 1.5rem;
		padding-top: 10px;
		display: block;
		padding-left: 0rem;
	}
}


.h-2 {
	/* height: 6rem; */
	
	} 
.h-2 .t-2-2{
	font-size: 1.5rem;
	display: inline;
	color: var(--red);
	
	} 
.h-2 .t-2-3{
	font-size: 1.5rem;
	padding-inline: 1.2rem;
	display: inline;
	} 

.h-2 a{
	color: var(--red);
	text-decoration: none;
	position: relative;
	} 


.h-2 .t-2-2 a:before{
	content: "";
	position: absolute;
	bottom: -2px;
	height: 4px;
	width: 0px;
	background-color: var(--blue);
	border-radius: 50px;
	transition: width 0.3s ease;
}

.h-2 .t-2-2 a:hover:before{
	width: 100%;
}











	 
@media (max-width: 834px){
	.h-2 .t-2-1{
		font-size: 1rem;
		padding-bottom: 0.3rem;
	}
	.h-2 .t-2-2{
		font-size: 1.25rem;
		display:block;
		} 
	.h-2 .t-2-3{
		font-size: 1.1rem;
		display:block;
		} 
}








.h-3 {

	font-size: 1.5rem;
}


.h-3 ul li {
margin: 0.3rem auto;
background-color: var(--yellow);
width: 12rem;
padding: 1.2rem;
border-radius: 50px;
position: relative;
box-shadow: 0px 1px 3px #63500b;
}

.h-3 ul li:hover {
	text-decoration: none;
	background-color: var(--red);
	transition: box-shadow 0.5s, transform 0.5s;
	box-shadow: 3px 3px 5px var(--grey);
	transform: translateY(-3px);
	
}

.h-3 a {
	text-decoration: none;
	color: var(--grey) ;
		
}





.h-3 ul li:hover::before {
	content: ''; 
	position: absolute;
	display: inline-flex;
	text-align: left;
	width: 1.5rem; 
	height: 1.5rem; 
	left: 15px;
	top: 30%;
	background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');

	background-size: contain; 
	background-repeat: no-repeat;
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
	opacity: 1;
	animation: blink 1s infinite;
}

@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
  }


  @media (max-width: 834px){
	.h-3 {
		font-size: 1.25rem;
	}

	.h-3 ul li {
		margin: 0.3rem auto;
		width: 10rem;
		padding: 1rem;
		border-radius: 50px;
		}

	.h-3 ul {
		margin-bottom: 10rem;
	}

}
















.scroll-down{
	height: 50px;
	width: 50px;
	border: 2px solid var(--grey);
	border-radius: 50px;
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	cursor: pointer;
	
}

.scroll-down::before,.scroll-down::after{
	content: '';
	position: absolute;
	top: 40%;
	left: 50%;
	border: 5px solid var(--grey);
	border-radius: 5px;
	height: 15px;
	width: 15px;
	transform: translate(-50%, -50%) rotate(45deg);
	border-top: transparent;
	border-left: transparent;
	animation: scroll-down 1s linear infinite;
}
@keyframes scroll-down {
	0%{
		opacity: 1;
		top: 40%;
	}
	60%{
		opacity: 1;
		top: 50%
	}
	100%{
		opacity: 1;
		top: 40%
	}
}








.scroll-down2{
	height: 50px;
	width: 50px;
	border: 2px solid var(--grey);
	border-radius: 50px;
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	cursor: pointer;
}

.scroll-down2::before{
	content: '';
	position: absolute;
	top: 40%;
	left: 50%;
	border: 5px solid var(--grey);
	border-radius: 5px;
	height: 15px;
	width: 15px;
	transform: translate(-50%, -50%) rotate(45deg);
	border-top: transparent;
	border-left: transparent;
	animation: scroll-down2 1s linear infinite;
}
@keyframes scroll-down2 {
	0%{
		opacity: 1;
		top: 40%;
	}
	60%{
		opacity: 1;
		top: 50%
	}
	100%{
		opacity: 1;
		top: 40%
	}
}



@media (max-width: 834px){
	.scroll-down{
		display: none;
	}
}























#homehobby {
	width: auto;
	display: grid;
	place-items: center;
}

.hobby-container>.container {
	width: 100%; 
	padding: 0;
}


.hobby-container>.container p{
	width: 70%;
	word-spacing: 2px;
	line-height: 1.5rem;
	text-align: justify;
	margin-bottom: 0;
	font-size: 1.2rem;
	padding-left: 5rem;
	padding-top: 1rem;
}

.hobby-container {
	width: 100%;
	height: auto;
	/* background-color: #481414; */
	display: grid;
	place-items: center;

  }

  .hobby-container h2,.hobby-container h3{
	text-align: left;
	color: var(--yellow);
	text-shadow: 2px 2px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);
	font-weight: bold;	
}

.hobbytext{	padding-top: 5rem;}


  @media (max-width: 834px){

	.hobby-container>.container{
		align-items: center;
	}
	.hobbytext{
		padding-top: 0;
		margin: 0 auto;
		width: 100%;
		display:grid;
		place-items: center;
	}
	.hobby-container>.container p{
		width: 70%;
		text-align: center;
		font-size: 1rem;
		padding: 0;
		
	}

	.hobby-container h2{
		font-size: 2.5rem;
	}


}


.hobby-camerapic{
	width: 80%;
	height: auto;
	margin-top: 2rem;
}

.hobby-camerapic img{
    max-width: 100%;
    max-height: 100%;
	object-fit: cover;
	border-radius: 5px;
	box-shadow: 2px 2px 10px var(--grey);
	transform: translatey(0px);
}

@media (max-width: 834px){
	.hobby-camerapic{
		max-width: 70vw;
		margin: 0 auto;
	}

	.hobby-camerapic img{
		border-radius: 20px;
	}
}





.slider{
	height: 280px;
	margin: auto;
	position: relative;
	width: 100%;
	display: grid;
	place-items: center;
	 overflow: hidden;
}





.slider-track{
	display: flex;
	width: calc(340px * 28);
	animation: scroll 100s linear infinite;
}

.slider-track:hover{
	animation-play-state: paused;
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-340px * 14));
	}
}

.slide{
	height: 220px;
	width: 340px;
	display: flex;
	align-items: center;
	padding: 10px;
	perspective: 150px;
	
}

.slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s;
	border-radius: 5px;
	border: 1px solid transparent
}

.slide img:hover{
	transform: translateZ(15px);

}






































#featurework1 {
	margin: 0 auto;
    position: relative;
    /* height: 100vh; 
	max-height: 100vh; */
	background-color: var(--blue);
	width: 100vw;
	border: 1px solid black;
}

#featurework1>div {
	border: 1px solid black;

}

#featurework1 h1,p{
	padding-bottom: 2rem;
}

.ftw-each {
	margin: 8rem auto;
}










.ftw-roles{
	padding-bottom: 0.5rem;

}




.ftw-roles ul {
font-size: 1rem;
	position:relative;
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:flex-start;
	align-items: flex-end;
}

@media (max-width: 834px){
	.ftw-roles ul {
		justify-content: center;
	}

}


.ftw-roles ul li{
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 0.5rem;
	padding-right: 0.3rem;
	border-right: 3px solid var(--yellow);
	
}

.ftw-roles ul li:last-child{
	border: none;
}

@media (max-width: 834px){
	.ftw-roles ul li{
		border-right: 3px solid var(--yellow);
		padding: 0.3rem;
		margin: 0.1rem;
		font-size: 1rem;
	}

}

@media (min-width: 2000px){
	.ftw-roles h5 {
		font-size: 2.5rem;
	}
	.ftw-roles ul li{
		font-size: 1.7rem;
	}

}



.ftw-tools{
	padding-bottom: 0.5rem;
 
}
@media (max-width: 834px){
	.ftw-tools  {
		padding-bottom: 0rem;
	}

}


.ftw-tools ul {
	font-size: 1.2em;
	position:relative;
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:flex-start;
	align-items: center;
}

.ftw-tools ul svg{
	fill: var(--grey);
	height: 2.5rem;
	width: 2.7rem;
 
}


#appthetic ul li:nth-child(3) svg,
#appthetic ul li:nth-child(4) svg{
	height: 1.9rem;
	width: 1.9rem;
	margin: 0 auto;
	padding-inline: 4px;
 
}



@media (max-width: 834px){
	.ftw-tools ul {
		justify-content: center;
	}
	.ftw-tools ul svg  {
		height: 2rem;
		width: 2.3rem;
	}

#appthetic ul li:nth-child(3) svg,
#appthetic ul li:nth-child(4) svg{
	height: 1.6rem;
	width: 1.6rem;
	margin: 0 auto;
	padding-inline: 3px;
 
}
}




@media (min-width: 2000px){
	.ftw-tools h5 {
		font-size: 2.5rem;
	}
	.ftw-tools ul li{
		font-size: 1.7rem;
	}

	.ftw-tools ul svg{
		height: 3.5rem;
		width: 3.7rem;
	 
	}

	#appthetic ul li:nth-child(3) svg,
	#appthetic ul li:nth-child(4) svg{
	height: 2.7rem;
	width: 3rem;
 
}

}








.ftw-pic img{
	max-width: 90%;
	height: auto; 
	overflow: hidden;
	border: 1rem solid var(--yellow);
	border-radius: 2rem;
	box-shadow: 5px 5px 10px var(--grey) ;
}













































/* test gsapftw scroll */

#featurework2 {
	margin: 0 auto;
    position: relative;
    /* height: 100vh; 
	max-height: 100vh; */
	background-color: var(--blue);
	width: 100vw;
	border: 1px solid black;
}

#featurework2>div {
	border: 1px solid black;

}

#featurework2 h1,p{
	padding-bottom: 2rem;
}

#featurework2 .ftw-each {
	margin: 8rem auto;
}



#featurework2 .ftw-roles{
	padding-bottom: 0.5rem;

}
#featurework2 .ftw-roles ul {
font-size: 1.2em;
	position:relative;
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:flex-start;
	align-items: flex-end;
}



#featurework2 .ftw-roles ul li{
	border: 1px solid black;
	border-radius: 2rem;
	padding: 0.5rem;
	margin: 0.2rem;
}



#featurework2 .ftw-pic img{
	max-width: 90%;
	height: auto; 
	overflow: hidden;
	border: 1rem solid var(--yellow);
	border-radius: 2rem;
	box-shadow: 5px 5px 10px var(--grey) ;
}















/* test gsap ftw scroll */

.space{
	width: 100%;
	height: 100%;
	padding-top: 4rem; 
	 padding-bottom: 4rem;
	/* line-height: 2rem; */
	background-color: var(--yellow);
	/* height: 100vh; */
	display: flex;
	align-items: center;
	justify-content: center;
	
	
}

.space p{
padding-inline: 2rem;

}
.space h1{
	color: var(--red);
	text-shadow: 3px 3px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);
	font-weight: bold;

}

.space h4{
	padding-top: 3rem;
	font-weight: bold;
}


.iconlist{
	text-align: center;
}




/* @media (max-width: 700px){
	.space{
		text-align: center;
	}
	.space h1{
		font-size: 2rem;
		font-weight: 500;
	}
	.space h3{
		font-size: 1.5rem;
	}
	.space p{
		font-size: 1rem;
		padding-top: 1.5rem;
		line-height: 1.5rem;
		text-align: justify;
		width: 70vw;
		margin: 0 auto;
	}
	.iconlist svg{
		width: 10%;
		height: 10%;
	}
	
} */

@media (max-width: 834px){
	

	.space h1{
		font-size: 2rem;
	}

}


@media (min-width: 2000px){
	
	.space{
		
		height: 100vh;
	}

	.space p{
		font-size:1.7rem;
	
	}
	.space h1{
		font-size: 6rem;
	}


	.space h3{
		font-size: 3rem;
		line-height: 6rem;
	}


	.iconlist svg{
		width: 8%;
		height: 8%;
	}
}



.space2{
	width: 100%;
	height: 15vh;
}





.skillbox{
	background-color: var(--white);
	border-radius: 5px;
	text-align: center;
	min-height: 21rem;
	transition: box-shadow 0.5s, transform 0.5s;

}

.skillbox .skillboxin{
	margin: 2rem;
}

.skillbox .skillicon{
	width: 3rem;
	height: 3rem;
	display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
	transition: transform 0.5s ease-in-out;
	
}

.skillbox .icon {
    max-width: 100%;
    max-height: 100%;
}



@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


.skillbox:hover .skillicon {
    animation: spin 0.8s linear infinite;
}

.skillbox:hover {
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); 
    transform: translateY(-5px);
}


















.wrap{
 position: relative;
 width: 100%;
 height: auto;
 padding: 0 20px;
 z-index: 1	;
 /* background-color: #AEDF35; */
}

@media (max-width: 1024px){
	.wrap{
		padding: 0;
		text-align: center;
	}
}

.ftwork1{
	background-color: #485eea;
	height: 40rem;
}

.ftwork2{
	background-color: #363b5f;
	height: 40rem;
}
.ftwork3{
	background-color: #F92B3A;
	height: 19.5rem;
}

.ftwork4{
	background-color: #F92B3A;
	height: 19.5rem;
}




























/* old feauture work stlye end */




.containerwork{
	width: 80rem;
	margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 2000px){
	.containerwork{
		width: 95rem;
	}
}




.homeftworkheader{

	/* position: sticky; */
	top: 0; 
	padding-top: 20px;
	padding-bottom: 20px;
	z-index: 0;
	color: var(--yellow);
	text-shadow: 2px 2px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);
	font-weight: bold;	
}

@media (max-width: 834px){
	.homeftworkheader{
		position: static;
		text-align: center;
	}
	.homeftworkheader h1{
		font-size: 2rem;	
	}
}


.work{
	display: flex;
}

.work_left {
position: relative;
z-index: 2;
}

.work_text {
margin: auto;
width: 100%;
}

.work_info {
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
}

@media (max-width: 834px){
	.work_info{
		height: 100vh;
	}
}

@media (min-width: 2000px){
	.work_info{
		height: 75vh;
	}
}

.title {
text-align: left;
font-size: 5rem;
text-transform: uppercase;
font-weight: bold;
color: var(--yellow);
letter-spacing: -0.3rem;
padding-bottom: 0.8rem;
text-wrap: nowrap;
text-shadow: 2px 2px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);
}

@media (max-width: 834px) {
	.title {
	font-size: 3rem;
	letter-spacing: 0rem;
	text-align: center;
	}
}

@media (min-width: 2000px){
	.title {
		font-size: 7rem;
		}
}

.subtitle{
text-align: left;
/* font-size: 1.2rem; */
padding-bottom: 2rem;
}

@media (max-width: 834px) {
	.subtitle {
	font-size: 1rem;
	text-align: center;
	width: 80vw;
	margin: 0 auto;
	}
}



.work_icon{
	font-family: var(--head-font);
	color: var(--grey);
	font-size: 5rem;
	font-weight: 200;
	display: flex;
	justify-content: center;
	
}
.work_icon a{
color: var(--grey);
margin-inline: 2.5rem;
transition: text-shadow 0.5s, transform 0.5s;
}

.work_icon a:hover {
	text-shadow: 2px 2px 4px var(--grey);
	transform: translateY(-3px);
	color: var(--red);
}


@media (max-width: 1024px) {
	.work_icon{
		font-size: 3rem;
	}
	.work_icon a{
		margin-inline: 0.8rem;
	}
}


.work_link{
	margin-top: 1rem;
	text-align: left;
}

.work_link h4 {
	margin: 0;
	font-size: 1.3rem;

}

.work_link ul li {
	
	background-color: var(--yellow);
	padding: 1rem;
	padding-left: 3rem;
	padding-right: 2rem;
	border-radius: 40px;
	border: solid 2px var(--grey);
	position: relative;
	box-shadow: 0px 1px 3px var(--grey);
	text-align: center;
	}

@media (max-width: 834px){

	.work_link{
		margin-top: 1rem;

	}

	.work_link ul li{
		width: 13rem;
		padding: 1rem;

	}
	.work_link ul li h4{
		font-size: 1rem;
	}
}


	.work_link ul li:hover {
		text-decoration: none;
		background-color: var(--red);
		transition: box-shadow 0.5s, transform 0.5s;
		box-shadow: 3px 3px 5px var(--grey);
		transform: translateY(-3px);
		
	}
	
	.work_link a {
		text-decoration: none;
		color: var(--grey) ;	
	}

	.work_link ul li::before {
		content: ''; 
		position: absolute;
		display: inline-flex;
		text-align: left;
		width: 1.5rem; 
		height: 1.5rem; 
		left: 25px;
		top: 23%;
		background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
	
		background-size: contain; 
		background-repeat: no-repeat;
		filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
		opacity: 1;
	}
	
	.work_link ul li:hover::before {
		content: ''; 
		position: absolute;
		display: inline-flex;
		text-align: left;
		width: 1.5rem; 
		height: 1.5rem; 
		left: 25px;
		top: 23%;
		background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
	
		background-size: contain; 
		background-repeat: no-repeat;
		filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
		opacity: 1;
		animation: blink 1s infinite;
	}
	
	@keyframes blink {
		0% { opacity: 1; }
		50% { opacity: 0; }
		100% { opacity: 1; }
	  }

	  @media (max-width: 834px){
		.work_link ul li::before {
			content: ''; 
			position: absolute;
			display: inline-flex;
			text-align: left;
			width: 1.2rem; 
			height: 1.2rem; 
			left: 10px;
			top: 30%;
			background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
		
			background-size: contain; 
			background-repeat: no-repeat;
			filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
			opacity: 1;
		}
		
		.work_link ul li:hover::before {
			content: ''; 
			position: absolute;
			display: inline-flex;
			text-align: left;
			width: 1.2rem; 
			height: 1.2rem; 
			left: 10px;
			top: 30%;
			background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
		
			background-size: contain; 
			background-repeat: no-repeat;
			filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
			opacity: 1;
			animation: blink 1s infinite;
		}
	}





#contact .work_link ul li{
	width: 80%;
}

@media (max-width: 834px){

#contact .work_link ul{
	text-align: center;
}
#contact .work_link ul li{
	width: 70vw;
}
}

@media (max-width: 1200px){
	#contact .work_link ul li h3{
		font-size: 1rem;
	}
}







.work_pic {
	height: auto;
	display: flex; 
    justify-content: flex-end; 
    align-items: center; 
	
}



.work_pic_in{
	width: 40vw;
	height: auto;
	max-height: 65vh;
	overflow: hidden;
	border-radius: 5px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	/* position: relative; */
}


.work_pic_in img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	color: #485eea;
	border-radius: 5px;
	cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23FFC700" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"%3E%3C/path%3E%3C/svg%3E'), auto; 
	
	background-size: contain; 
	background-position: center;
	
	
	}

	
	

@media(max-width: 1600px) {
	.work_pic_in{
		width: 50vw;
	}
}

@media(max-width: 834px) {
	.work_pic {
		justify-content: center; 
	}
	.work_pic_in{
		width: 90vw;
		border-radius: 1rem;
	}
	.work_pic_in img{
		border-radius: 1rem;
	}
	
	
}

@media(min-width: 2000px) {
	.work_pic_in{
		width: 43vw;
	}
}



.work_pic_in:hover {
    transform: scale(1.02);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}




























.work_linkall{
	margin-top: 1rem;
text-align: center;
}

.work_linkall h4 {
	margin: 0;

}

.work_linkall h4 sup {
	font-size: 1rem;

}




.work_linkall ul li {
	
	background-color: var(--yellow);
	width: 17rem;
	padding: 1.4rem;
	border-radius: 40px;
	border: solid 2px var(--grey);
	position: relative;
	box-shadow: 0px 1px 3px var(--grey);
	text-align: center;
	line-height: 1.5;
	}



	.work_linkall ul li:hover {
		text-decoration: none;
		background-color: var(--red);
		transition: box-shadow 0.5s, transform 0.5s;
		box-shadow: 3px 3px 5px var(--grey);
		transform: translateY(-3px);
		
	}
	
	.work_linkall a {
		text-decoration: none;
		color: var(--grey) ;	
	}

	.work_linkall ul li::before {
		content: ''; 
		position: absolute;
		display: inline-flex;
		text-align: left;
		width: 2rem; 
		height: 2rem; 
		left: 25px;
		top: 28%;
		background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
	
		background-size: contain; 
		background-repeat: no-repeat;
		filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
		opacity: 1;
	}
	
	.work_linkall ul li:hover::before {
		content: ''; 
		position: absolute;
		display: inline-flex;
		text-align: left;
		width: 2rem; 
		height: 2rem; 
		left: 25px;
		top: 28%;
		background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
	
		background-size: contain; 
		background-repeat: no-repeat;
		filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
		opacity: 1;
		animation: blink 1s infinite;
	}
	
	@keyframes blink {
		0% { opacity: 1; }
		50% { opacity: 0; }
		100% { opacity: 1; }
	  }

	 


	  @media (min-width: 2000px){
		.work_linkall ul li {
			width: 22rem;
			border-radius: 60px;
		}
		.work_linkall h4 {
			font-size: 2.5rem;
		
		}
	
		.work_linkall h4 sup {
			font-size: 0.5rem;
		
		}}











.work_right {
width: 46%;
height: auto;
/* background: green;  */
}

.work_right-bl {
display: flex;
flex-direction: column;
justify-content: center;
position: sticky;
width: 100%;
height: 100vh;
top: 0;
/* height: 80vh; */
/* top: 10vh; */
/* background:#ff664f;  */
}

@media (max-width: 834px) {
	.work_right-bl {
		display: none;
	}
}

.ftwstickytext{
	text-align: right;
}

.work_photo {
width: 40vw;
height: 30vw;
position: relative;
}
.work_photo-item {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 80px;
overflow: hidden;
}
.work_photo-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}



























































.allworkgallery {
	position: relative;
	height: 100vh;
	max-height: 100vh;
	aspect-ratio: 1;
	justify-content: center;
    align-items: center;
	
	width: 100vw;
	/* overflow: hidden; */
	max-width: 100vw;
	/* overflow-x: hidden */

	display: block;
	overflow-x: hidden;
	
  }
.containertext{
	position: absolute;
	top: 40%;
	width: 100vw;
	max-width: 100vw;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
@media (min-width: 2000px){
	.containertext{
	top: 42%;
}}


  .allworkgallery  h1 {
	position: static;
	text-align: center;
	z-index: 2;
	color: var(--yellow);
	text-shadow: 2px 2px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);
	font-weight: bold;



  }


.galline {
	height: 45vh;
	min-height: 20rem;
	width: 100vw;
	display: flex;
	flex-wrap: nowrap;
	align-items: center; 
  justify-content: center; 


  /* overflow-x: hidden */
  
}

.galline  img {
	/* min-width: 25em;
	max-width: 35em; */
	height: 36vh;
	width: auto;
	/* max-width: calc(100vw / 5); */
	/* width: 15vw;
	height: auto; */
	object-fit: cover;
	padding: 0 0.5rem;

}


@media(max-width: 1024px){
	.allworkgallery{
		display: none;
	}
	
	/* .galline  img{
		height: 28vh;
		max-width: calc(100vw / 6);
	} */
  }
  

  @media(max-width: 568px){
	.allworkgallery{
		display: none;
	}
  }
























































#contact {
	margin: 0 auto;
    position: relative;
    height: 100vh; 
	max-height: 100vh;
	width: 100vw;
	background-color: var(--yellow);

	
}


#contact h1{
	text-align: left;
	color: var(--red);
	text-shadow: 2px 2px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);
	font-weight: bold;
	
}

#contact ul{
	text-align: center;
}















/* ------ Home end -----*/
















/* project style  */





section.project {
	text-align: center;
	justify-content: start;
	font-family: var(--head-font);
	box-sizing: border-box;
	width: 100%;
	display: flex;
	margin: 0 auto;
}


section.project>.container {
	margin: auto;
	text-align: center;
	width: 90%;
	/* max-width: 100vw; */
	
}

/* ต้องแกไซส์อีก ปุ่มฟิลเตอร์ซ้อน */
@media (min-width: 834px) and (max-width: 1600px){
	section.project>.container {
		width: 80%;
		/* margin: -1rem auto; */
	}

}









.eachhead {
	/* height: 4rem; */
	/* position:relative;
	display: flex;
	left: -10rem; */
	text-align: right;
} 


.eachhead h1{
	color: var(--yellow);
	text-shadow: 2px 2px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);
	font-weight: bold;
	display: none;
} 
	




@media (max-width: 834px){
	.eachhead {
		text-align: center;
		
	}
	.eachhead h1{
		display: block;
	}

}

.project .eachhead {
	margin-top: 5rem;
	
} 


.p-right {
	height: auto;
	padding-bottom: 1rem;
}













.hide {
    display: none;

}

.project-details {
	/* aspect-ratio: 2; */
	border-radius: 1rem;
	opacity: 0;
	z-index: 100;
	height: 100%;
  }
  
  .project-details:not(.hide) {
	opacity: 1;
	z-index: 100;
	animation: showcard 1s linear;
	

  }
  
  @keyframes showcard {
	0%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	
  }







.p-left{
	margin-top: 4rem;
	width: 30vw;
	height: calc(100vh - 300px); 
	background: url('../img/logowithline.png') center/cover no-repeat;
	background-size: contain; 
	background-position-y: center;
	/* display: flex; */
	justify-content:flex-end;
	/* align-items:flex-start; */
	
}

/* @media (max-width: 834px){
	.p-left{
	display: none;
	}
} */

@media (max-width: 1290px){
	.p-left{
	display: none;
	};
}




.p-left .imageshow {
	/* display: flex;
	align-items: center;
	margin: 20px;
    justify-content: flex-start;
    align-items: center; */
    height: 100%;
	/* margin-bottom: 1rem; */
	width: 100%;

	
}



.p-left .imageshow img{
	border-radius: 1rem;
	max-width: 100%;
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
	object-fit: cover;
	object-position: left bottom;
	
}

.p-left .pj-detail{
	
 	text-align: left;
	 background-color: var(--yellow);
	 border-radius: 1rem;
}

.p-left .pj-detail .pj-detail-list ul{
	margin-left: 10px;
	position:relative;
	display:flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items:center;
	/* height: 1rem; */
}

.p-left .pj-detail .pj-detail-list li{
	margin-right: 10px;
	font-family: var(--body-font);
	font-weight: 900;
}

@media (max-width: 1600px){
	.p-left .pj-detail .pj-detail-list li{
		font-size: 0.9em;
	}

}


.p-left .pj-detail p{
	font-size: 1.2em;
	font-family: var(--body-font);
	font-weight: 500;
	line-height: normal;
	padding-left: 20px;
	padding-right: 20px;
}

.p-left .pj-detail svg{
fill: var(--grey);
}



@media (max-width: 1600px){
	.p-left .pj-detail p{
		font-size: 0.9em;
	}

}





















.p-right .filter-menu {
	height: 4em;
}



.p-right .filter{
	position:relative;
	height:100%;
	width:100%;
	display:flex;
	flex-direction: row;
	justify-content: end;
	align-items: end;
	border-bottom: 3px solid var(--grey);
}



.p-right .filter li{
	margin-left: 10px;
	padding: 7px;
	border: 2px var(--grey) solid;
	border-radius: 1em;
	margin-bottom: 10px;
	cursor: pointer;
	box-shadow: 0px 1px 3px var(--grey);
}

@media (max-width: 834px){
	.p-right .filter li{
		margin-left: 5px;
	}

}




.p-right .filter li:nth-child(1),
.p-right .filter li:nth-child(2),
.p-right .filter li:nth-child(3),
.p-right .filter li:nth-child(4){
	transition: box-shadow 0.5s, transform 0.5s;
	background: var(--yellow);
}

.p-right .filter li:nth-child(1){
	padding-inline: 2rem;
}



@media (max-width: 834px){
	.p-right .filter li:nth-child(1){
		font-size: 1rem;
	}
	.p-right .filter li:nth-child(2){
		font-size: 0.7rem;
	}
	.p-right .filter li:nth-child(3){
		font-size: 0.7rem;
	}
	.p-right .filter li:nth-child(4){
		font-size: 0.7rem;
	}
	.p-right .filter li:nth-child(5){
		font-size: 0.7rem;
	}
}








.p-right .filter li:nth-child(1):hover{
	box-shadow: 2px 2px 5px var(--grey);
	transform: translateY(-6px);
	
}
.p-right .filter li:nth-child(2):hover{
	box-shadow: 2px 2px 5px var(--grey);
	transform: translateY(-6px);

}
.p-right .filter li:nth-child(3):hover{
	box-shadow: 2px 2px 5px var(--grey);
	transform: translateY(-6px);
}
.p-right .filter li:nth-child(4):hover{
	box-shadow: 2px 2px 5px var(--grey);
	transform: translateY(-6px);
}
.p-right .filter li:nth-child(5):hover{
	box-shadow: 2px 2px 5px var(--grey);
	transform: translateY(-6px);
}

.p-right .filter .all-list{
	font-size: 2rem;
	display: flex;
	position: absolute;
	left: -10px;
}







.p-right ul .p-row{
	position:relative;
	/* height:100%;
	width:100%; */
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	padding:1.5rem 0;
	border-bottom:2px solid rgba(50, 50, 50, 0.2);;
	margin: 10px;

}


.p-right .item{
	padding: 0 0.7rem ;
	height: 60vh;
	overflow: auto;

}

@media (min-width: 1290px) and (max-width: 1600px){
	.p-right .item{
		height: 25rem;
	}
}

@media (max-width: 1290px){
	.p-right .item{
		height: auto;
	}
}



.item::-webkit-scrollbar{
	width: 8px;
	display: block;
}








.p-right .item a{
	text-decoration: none;
	color: var(--grey);
}



.p-right .item ul li:hover {
	/* background-color: var(--yellow); */
	border-radius: 1.5em;
	background-color: var(--yellow);
}





/* .p-right .item ul .p-row-right{
	width:100%;
	text-align:right;
} */

@media (max-width: 834px){
	.p-title{
	text-align: left;
	font-size: 1.2rem;
	}
}

.p-right .item ul .p-row-right .p-category{
	font-size: 0.9em;
	position:relative;
	display:flex;
	flex-direction: row;
	justify-content: end;
	align-items: end;
	bottom: -5px;
	font-family: var(--body-font);
}


@media (max-width: 834px){
	.p-right .item ul .p-row-right .p-category{
	font-size: 0.8rem;
	flex-direction: column;
	height: 3rem;
	}
}

.p-right .item ul .p-row-right .p-category li{
	padding: 6px;
	border-right: var(--yellow) solid 3px;
	cursor: pointer;
}


.p-right .item ul .p-row-right .p-category li:last-child{
	border: none;
}

@media (max-width: 834px){
	.p-right .item ul .p-row-right .p-category li{
		margin: 0px 0;
		border-right: none;
	
	}
}

.p-right .item ul .p-row-right .p-category li:hover{
	background-color: transparent;
}






.p-right .item .card {
	transition: opacity 1s ease-in-out, height 1s ease-in-out;
	max-height: 300px;
  }
  
  .card.hide {
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: all 1s ease-in-out alternate;
  }












  .card a {
	transition:  box-shadow 0.5s;
  }

  .card:hover {
	box-shadow: 2px 2px 10px var(--grey);
	
  }

  .card h4::before {
	content: ''; 
	display: inline-block; 
	width: 1.3rem; 
	height:1.3rem; 
	background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" ><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg>'); 
	background-size: contain; 
	background-repeat: no-repeat;
	margin-right: 5px; 
	margin-left: 2px; 
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
	opacity: 0;

  }

  .card:hover h4::before {
	opacity: 1;
	transform:  translateX(0px);
	transition: opacity 1s transform 1s;

  }

  .card:hover h4{
	transform:  translateX(20px) scale(1.2) ;
  }

  h4{
	transition: transform 1s;
  }









  .iconuse{
	text-align: center;
	display: flex;
	justify-content: flex-start;
    align-items: center;
}

.iconuse svg{
	fill: var(--grey);
	width: 1.3rem;
	height: 1.3rem;
}

/* @media (max-width: 834px){
	.iconuse svg{
		width: 10%;
		height: 10%;
	}
} */









/* ------ project end -----*/




/* About */

.about >.container{
	font-family: var(--body-font);
	/* max-height: 100vh; */
	display: flex;
	align-items: center;
	justify-content: start;
	width: 100%;
	padding: 0 0;
	/* aspect-ratio: 1; */
	margin: 0 auto;
	height: 100vh;;
}

@media (max-width: 834px){
.about >.container{
	height: auto;
}
}



.a-1 {
	/* background-color: #F92B3A; */
	width: 90%;
	height: auto;
	display: flex;
    justify-content: center; 
    align-items: center;
}

.a-1 .profileimg{
	/* background-color: #63262a; */
	width: 60%;
	height: auto;
	display: flex;
    justify-content: center;
  
}
@media (min-width: 835px) and (max-width: 1300px){
	.a-1 .profileimg {
		width: 100%;
	}
	}
@media (min-width: 1300px) and (max-width: 1900px){
	.a-1 .profileimg {
		width: 80%;
	}
	}



.a-1 .profileimg img {
    max-width: 100%;
    max-height: 100%;
	object-fit: cover;
	border-radius: 5px;
	box-shadow: 2px 2px 10px var(--grey);
	transform: translatey(0px);
	/* animation: float 6s ease-in-out infinite; */
}







@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}






.aboutmorepadding{
	margin-top: 10rem;
	margin-bottom: 10rem;
}



















.a-2 {
	/* background-color: #F92B3A; */
	margin: 0 auto;
	justify-content: center;
}

.a-2 .a-2-1 h3{
	font-size: 3rem;
	color: var(--yellow);
	text-shadow: 2px 2px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);
	font-weight: bold;
	
}

@media (max-width: 834px){
.a-2 .a-2-1 h3 {
	letter-spacing: -0.05em;
	font-size: 1.6rem;
	text-align: center;
}
}

@media (min-width: 2000px){
	.a-2 .a-2-1 h3 {
		font-size: 4rem;

	}
}



.a-2 .a-2-1 p{
	word-spacing: 2px;
	line-height: 1.2rem;
	/* text-align: justify; */
	margin-bottom: 0;
	font-size: 1.2rem;
}
@media (max-width: 834px){
	.a-2 .a-2-1 p{
		word-spacing: 2px;
		text-align: center;
		line-height: 1.4em;
		font-size: 1rem;
	}
}


.a-2 .a-2-1{
	width: 80%;
}

@media (max-width: 834px){
	.a-2 .a-2-1 {
		width: 80%;
		padding-inline: 20px;
		margin: 0 auto;
	}

}












.skillsection{
	width: 100%;
	height: auto;
	/* padding-top: 5rem; */
	line-height: 3rem;

}

.skillsection p{
	font-size: 1.5rem;
	padding-top: 1rem;
	line-height: 2.5rem;
}

.iconlist{
	text-align: center;
	display: flex;
	justify-content: space-between;
    align-items: center;
	margin-top: 2rem;
}

.iconlist svg{
	fill: var(--grey);
	width: 3%;
	height: 3%;
}

@media (max-width: 834px){
	.iconlist svg{
		width: 10%;
		height: 10%;
	}
}




@media (max-width: 834px){
	.skillsection svg{
		width: 13%;
		height: 13%;
	}
}















#factory{

	font-family: var(--body-font);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 0;
	flex-direction: column;
}

@media (max-width: 834px){
	#factory{
 	width: 100vw;
	 margin: 0;
	 padding: 0;
	}
}

#factory>.container{
	margin:0 auto;
	text-align: center;
	width: 100%;
	flex-direction: column;
	padding: 0;
}
@media (max-width: 834px){
	#factory>.container{
		width: 100vw;
		padding: 0;
	}
}

#factory .a-2{
	text-align: left;
	padding-left: 5rem;
	font-size: 1.2em;
	word-spacing: 2px;
	line-height: 1.2em;
	text-align: justify;	
}

#factory h3 {
	padding-bottom: 0.5rem;
	padding-top: 1rem;
}


















.factorytext p {
	font-size: 1.2rem;
}





@media (max-width: 834px){
	#factory .factorytext{
	max-width: 75vw;
	margin: 0 auto;
	/* margin: 20px; */
	}
	.factorytext p {
		font-size: 1rem;
	}
}


.fachead{
text-align: left;
margin: 0;

}
.fachead h2{
color: var(--yellow);
text-shadow: 2px 2px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);
font-weight: bold;	
}

@media (max-width: 834px){
	#factory .a-2{
	text-align: left;
	padding-left: 0;
	font-size: 1.2em;
	word-spacing: 2px;
	line-height: 1.4em;
	}
	.fachead h2{
		font-size: 2.5rem;
		text-align: center;

	}

	.factory .a-2 h3{
		font-size: 2rem
	}
}







.logoanimecon {
	position: relative;
	top: -100px; /* Adjust this value to move the image up or down */
  }

  @media (max-width: 834px){
	.logoanimecon{
		max-width: 100vw;
		top: 0;
		margin: 0 auto;
		padding: 0 auto;
	}
}

  
  .factoryfoot {
	position:static;
	width: 100%;
	display: block;
	z-index: 0;
  }



  .contacthome{
	z-index: 100;
  }
  
  
  #svgObject {
	max-width: 100%;
	max-height: 100%;
  }


  @media (max-width: 834px){
	#svgObject {
		max-width: 100vw;

	}
}

.animfoot {
	position:absolute;
	bottom: 0;
	left: -3rem;
	width: 110%;
	display: block;
	z-index: 0;
  }

  @media (min-width: 834px){
	.animfoot {
		width: 115%;
		left: -8rem;
	}
}


@media (min-width: 2000px){
	.animfoot {
		left: -13rem;
		width: 120%;

	  }
}


.fixmarigin {
	margin-bottom: -10rem;
}


@media (max-width: 834px){
	.fixmarigin {
		margin-bottom: -4rem;
	}
}



































/* Footer */

Footer{
	text-align: center;
	font-family: var(--head-font);
	position: fixed;
	z-index: 50;
	bottom: 0px;
	right: 20px;
	
}




.footln{
	position: absolute;
	position: fixed;
	z-index: 50;
	bottom: 50px;
	left: 2%;
	font-size: 2rem;
	color: var(--grey);
}

@media (max-width: 834px){
	.footln{
		left: 2%;
		bottom: 10px;
	}
}



.footup{
	position: absolute;
	position: fixed;
	z-index: 50;
	bottom: 50px;
	right: 2%;
	font-size: 2rem;
	color: var(--grey);
}

@media (max-width: 834px){
	.footup{
		right: 2%;
		bottom: 10px;
	}
}



.uppage{
	height: 50px;
	width: 50px;
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-100%);
	cursor: pointer;
}

.uppage::before{
	content: '';
	position: absolute;
	top: 40%;
	left: 50%;
	border: 5px solid var(--grey);
	border-radius: 5px;
	height: 15px;
	width: 15px;
	transform: translate(-50%, -50%) rotate(45deg);
	border-bottom: transparent;
	border-right: transparent;
}



@media (max-width: 834px){
	.uppage{
		bottom: -5px;
		left: 15px;
	}
}











.container {
	/* position: relative; */
	z-index: 2; 
}




  .canvas-container2 {
	position: absolute;
	width: 98vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
  }























  /* =========== pjdetail =========== */




  section.pjdetail.container{
	max-height: 100vh;

	/* margin-top: 6rem;
	padding: 1rem; */
	margin: auto;
	text-align: center;
	font-family: var(--head-font);
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
  }




  @media (max-width: 834px){
	.contentgofirst {
		order: -1;
	}
	}
/* 
  section.pjdetail.container{
  z-index: 99;
} */
	hr {
		border: 1.5px solid var(--yellow);
	}

	.pjbanner{
		margin: 0 auto;
		padding-top: 2rem;
		text-align: center;
		justify-content: center;
		width: 100vw;
		height: 80vh;
		overflow: hidden;
		border-radius: 1rem;
	  }
	
  .pjbanner img{
	width: 100%;
	height: auto;
	border-radius: 1rem;
	align-items: center;
	background-size: cover;
    background-position: center;
	box-shadow: 2px 2px 10px var(--grey);
  }

  @media (max-width: 834px){
	.pjbanner{
		padding-top: 0.5rem;
		height: auto;
	}
	/* .pjbanner img{
		height: 30vh;
		width: 100%;
		object-fit: cover;
		border-radius: 2rem;
		margin: 0 auto;

	  } */
}


	.pjhead{
		margin: 2rem 0;
		color: var(--yellow);
		text-shadow: 2px 2px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);
		font-weight: bold;	
	}
	@media (max-width: 834px){
		.pjhead h1{
			font-size: 2.5rem;
		}
	}
	.pjhead2{
		margin:  0;
	}

	.pjdescription-l{
		font-size: 1.4rem;
	}

	.pjdescription-l h4{
		font-weight: bold;	
	}

	.pjdescription-l td{
		padding: 0 1rem 2rem 1rem;
		vertical-align: baseline;
	}

	.pjdescription-l li{
		padding-bottom: 0.8rem;
	}
	@media (max-width: 834px){
		.pjdescription-l h4{
			font-size: 1.3rem;
		}
		.pjdescription-l li{
			font-size: 1.2rem;
		}
	}




	.pjdescription-r {
		font-size: 1.4rem;
	}
	.pjdescription-r p{
		margin-right: 2rem;
		font-size: 1em;
		word-spacing: 2px;
		line-height: 1.7em;
		text-align: justify;
		padding-bottom: 2rem;
	}

	@media (max-width: 834px){
		.pjdescription-r {
			font-size: 1.2rem;
			margin: 0 auto;
		}
		.pjdescription-r p{
			margin: auto 2rem;
		}
	}








	.pjweblink{
		font-size: 1.5rem;
		text-shadow: 3px 3px 5px var(--white);

	}
	.pjweblink a{
	text-decoration: none;
	color: var(--red);
	transition: font-size 0.3s ease;
	}

	.pjweblink a:hover{
		font-size: 1.7rem;
		}


		.a-2-2{
			text-align: center;
		}

		.golink ul{
			display:flex;
		}
		@media (max-width: 834px){
			.golink ul{
				display: inline-block;
			}
		}

		
		.golink ul li {
		font-size: 1.5rem;
		background-color: var(--yellow);
		/* width: 10rem; */
		padding: 1rem;
		padding-left: 2rem;
		border-radius: 50px;
		border: solid 2px var(--grey);
		position: relative;
		box-shadow: 0px 1px 3px #63500b;
		text-align: center;
		}

		
		.golink ul li:hover {
			text-decoration: none;
			background-color: var(--red);
			transition: box-shadow 0.5s, transform 0.5s;
			box-shadow: 3px 3px 5px var(--grey);
			transform: translateY(-3px);
			
		}
		
		.golink a {
			text-decoration: none;
			color: var(--grey) ;	
		}

		.golink ul li::before {
			content: ''; 
			position: absolute;
			display: inline-flex;
			text-align: left;
			width: 1.5rem; 
			height: 1.5rem; 
			left: 10px;
			top: 30%;
			background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
		
			background-size: contain; 
			background-repeat: no-repeat;
			filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
			opacity: 1;
		}
		
		.golink ul li:hover::before {
			content: ''; 
			position: absolute;
			display: inline-flex;
			text-align: left;
			width: 1.5rem; 
			height: 1.5rem; 
			left: 10px;
			top: 30%;
			background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
		
			background-size: contain; 
			background-repeat: no-repeat;
			filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
			opacity: 1;
			animation: blink 1s infinite;
		}
		
		@keyframes blink {
			0% { opacity: 1; }
			50% { opacity: 0; }
			100% { opacity: 1; }
		  }
















		.footweblink{
			font-size: 2rem;
			text-align: right;
			padding-bottom: 2rem;
			text-shadow: 3px 3px 5px var(--white);
		}

		.footweblink a{
			text-decoration: none;
			color: var(--red);
			transition: font-size 0.3s ease;
			}

			.footweblink a:hover{
				font-size: 2.2rem;
				}


	.protolink{
		font-size: 2.5rem;
		text-align: center;
		padding: 3rem 0;
		text-shadow: 3px 3px 5px var(--white);
	}


	

	.protolink a{
		text-decoration: none;
		color: var(--grey);
		transition: color 0.3s ease;
		}

		.protolink a:hover{
			color: var(--blue);
		}

		@media (max-width: 834px){
			.protolink{
	
				background-color: transparent;
			}

			.protolink a{
	
				color: var(--red);
			}
		
		}


		.pjderails{
			margin-top: 2rem;
		}


		.pjderails p{
			font-size: 1.1rem;
			word-spacing: 1.1px;
			line-height: 1.3em;
			/* text-align: justify; */
			/* text-justify: inter-word;
			text-justify: inter-character; */
			padding-bottom: 2rem;
			/* padding-top: 2rem; */
			word-wrap: break-word;
		}



@media (max-width: 834px){
	.pjderails p{
	margin: auto 2rem;
	}
}














  .pjcontent h3{
	/* text-align: center; */
	padding: 60px 0 20px 0;
	color: var(--yellow);
	text-shadow: 2px 2px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);
	font-weight: bold;	
  }

  .pjderails h4{
	/* text-align: center; */
	color: var(--grey);
	font-weight: bold;	
	padding-top: 1rem;
  }

  .pjcontent h5{
	font-weight: bold;	
  }


  .pjcontent img{
	width: 100%;
	height: auto;
	border-radius: 10px;
  }
.centerimg{
	justify-content: center;
	text-align: center;	
	display: flex; 
    flex-direction: column;
	align-items: center;
}

.spaceimg{
	margin-block: 1rem;
}

.spaceimg img{
	margin-bottom: 3rem;
}






  .maximg{
	width: 50%!important;
  }

  @media (max-width: 834px){
	.maximg{
		width: 100%!important;
	  }
}


  .section-nav{
	position: sticky;
	top: 5%;
	margin-top: 60px;
	align-self: start;
	overflow-y: auto;
	text-align: left;
	margin-right: 1rem;
	padding-top: 1rem ;
	padding-bottom: 1rem ;
	/* background-color: #fff4ca; */
	/* border: var(--yellow) 3px solid	; */
	border-right: var(--yellow) 5px solid;
	display: block;
  }


@media (max-width: 834px){
	.section-nav{
display: none;
	}
}
  
/* 3. ScrollSpy active styles (see JS tab for activation) */
.section-nav li.active > a {
	/* color: var(--yellow); */
	font-stretch: narrower;
	font-weight: bold;
	font-size: 1rem;
	color: var(--yellow);
	text-shadow: 1px 1px var(--grey), -1px -1px var(--grey), 1px -1px var(--grey), -1px 1px var(--grey);

 }
  
  /* Sidebar Navigation */
  .section-nav {
	padding-right: 0;
	/* border-right: 1px solid #efefef; */
	
  }
  
  .section-nav a {
	text-decoration: none;
	display: block;
	padding: 1rem 0;
	color: #666;
	transition: all 50ms ease-in-out; /* 💡 This small transition makes setting of the active state smooth */
	
  }
  
  .section-nav a:hover,
  .section-nav a:focus {
	color: #666;
  }



  .section-nav ul,
.section-nav ol {
display: contents;
  list-style: none;
  margin: 0;
  padding: 1rem;
  font-size: 1rem;

  
}
.section-nav li {
  margin-left: 1rem;

  
}





.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
	
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}






.nextpj{
	display: flex;
	justify-content: flex-end;
}

.nextpjbt ul{
	display:flex;
}
@media (max-width: 834px){
	.nextpjbt ul{
		display: inline-block;
	}
}


.nextpjbt ul li {
font-size: 1.5rem;
background-color: var(--yellow);
/* width: 10rem; */
padding: 1rem;
padding-left: 2rem;
border-radius: 50px;
border: solid 2px var(--grey);
position: relative;
box-shadow: 0px 1px 3px #63500b;
text-align: center;
}


.nextpjbt ul li:hover {
	text-decoration: none;
	background-color: var(--red);
	transition: box-shadow 0.5s, transform 0.5s;
	box-shadow: 3px 3px 5px var(--grey);
	transform: translateY(-3px);
	
}

.nextpjbt a {
	text-decoration: none;
	color: var(--grey) ;	
}

.nextpjbt ul li::before {
	content: ''; 
	position: absolute;
	display: inline-flex;
	text-align: left;
	width: 1.5rem; 
	height: 1.5rem; 
	left: 10px;
	top: 30%;
	background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');

	background-size: contain; 
	background-repeat: no-repeat;
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
	opacity: 1;
}

.nextpjbt ul li:hover::before {
	content: ''; 
	position: absolute;
	display: inline-flex;
	text-align: left;
	width: 1.5rem; 
	height: 1.5rem; 
	left: 10px;
	top: 30%;
	background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');

	background-size: contain; 
	background-repeat: no-repeat;
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
	opacity: 1;
	animation: blink 1s infinite;
}

@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
  }






















 /* =========== pjdetail =========== */








/* HTML: <div class="loader"></div> */

.loadpage{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--white);
	z-index: 999;
	transition: opacity 0.75s, visibility 0.75s;
}
.loadpage--hidden {
	opacity: 0;
	visibility: hidden;
}
.loadpage::after {
	content: "";
	width: 45px;
	height: 30px;
	animation: l1 2s infinite linear;
 }
 @keyframes l1{
   0%,
   25%  {background:
		   linear-gradient(var(--red) 0 0) 50% 0/66% 100% no-repeat}
   25.1%,
   50%  {background:
		   linear-gradient(var(--blue) 0 0) 0 0/100% 50% no-repeat,
		   linear-gradient(var(--blue) 0 0) 0 0/33% 100% no-repeat}
   50.1%,
   75%  {background:
		   linear-gradient(var(--green) 0 0) 100% 0/66% 50% no-repeat,
		   linear-gradient(var(--green) 0 0) 0 100%/66% 50% no-repeat}
   75.1%,
   100% {background:
		   linear-gradient(var(--yellow) 0 0) 0 100%/100% 50% no-repeat,
		   linear-gradient(var(--yellow) 0 0) 50% 0 /33%  50% no-repeat}
 }









 /* scrollbar -------------------------------*/
::-webkit-scrollbar{
	width: 8px;
	display: none;
}
::-webkit-scrollbar-track{
	background: rgb(222, 222, 191);
}
::-webkit-scrollbar-thumb{
	background: #fcd855;
	border-radius: 50px;
}
  /* scrollbar -------------------------------*/

  






























  




  .swiper {
	width: 100%;
	height: 100%;
  }

  .swiper-slide {
	text-align: center;
	font-size: 18px;
	/* background: #fff; */
	display: flex;
	justify-content: center;
	align-items: center;
	/* border-radius: 1.5rem; */
  }

  .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* border-radius: 1.5rem; */
  }

  .swiper-slide img {
	display: block;
	width: 80%;
	height: auto;
	object-fit: cover;
	/* border-radius: 1.5rem; */
  }

  .swiper {
	margin-left: auto;
	margin-right: auto;
  }

  .swiper-button-next,.swiper-button-prev{
	color: var(--grey);

  }
  .swiper-pagination-bullet-active{
	background-color:  var(--grey);
  }

  .swiper-button-next:after, .swiper-button-prev:after {
	font-size: 1.5rem;
  }





















  /* The progress container*/
.progress-bar-mobile{
	width: 100vw;
	max-width: 100vw;
	bottom: -30px;
	position: fixed;
	display: none;
}

@media (max-width: 834px){
	.progress-bar-mobile{
		display: block;
	}
}


.progress-container {
	width: 100%;
	height: 8px;
	background: #ccc;
	opacity: 0.8;
	position: absolute;
	/* position:fixed;
	margin: 0 auto; */
  }
  
  /* The progress bar (scroll indicator) */
  .progress-bar {
	height: 8px;
	background: var(--yellow);
	width: 0%;
  }




  model-viewer {
	width: 100%;
	height: 100%;
  }