:root {
	--neongreen: #41e177;
	--yellow: #ffbe18;
	--dark-blue: #13161b;
	--white: #ffffff;
}

* {
	margin: 0px;
	padding: 0px;
	font-family: "Kanit", sans-serif;
	font-size: 16px;
	box-sizing: border-box;
}

body {

	background-color: var(--dark-blue);
}


a {
	text-decoration: none;
	color: var(--white);
}
b{
	font-family: "Kanit", sans-serif;
}

li {
	font-family: "Kanit", sans-serif;
}

.f-kanit{
	font-family: "Kanit", sans-serif;
}

.f-8bit{
	font-family: "Pixelify Sans", serif;
}

.f-permanent{
	font-family: "Permanent Marker", serif;
}

.error {
	color: var(--danger);
}

.H1-112-ExtraBold {
	font-size: 90px;
	line-height: 7vw;
}

.H2-64-ExtraBold {
	font-size: 64px;
	line-height: 7vw;
}

.H3-48-ExtraBold {
	font-size: 48px;
}

.H4-32-ExtraBold {
	font-size: 32px;
}

.H5-24-ExtraBold {
	font-size: 24px;
}

.H6-20-ExtraBold {
	font-size: 20px;
}

.B1-16-Medium {
	font-weight: medium;

}

.B2-14-Medium {
	font-weight: medium;
	font-size: 14px;
}

.B3-12-Medium {
	font-weight: medium;
	font-size: 12px;
}

.f-neon {
	color: var(--neongreen);
}

.f-yellow {
	color: var(--yellow);
}

.f-dark-blue {
	color: var(--dark-blue);
}

.f-white {
	color: var(--white);
}

.text-primary {
	color: var(--neongreen);
}

.btn {
	border-radius: 8px;
}

.btn-neongreen {
	background-color: var(--neongreen);
	color: var(--dark-blue);
	border: 1px solid transparent;
}

.nav-link {
	color: var(--white);
}

.nav-link:hover {
	color: var(--neongreen);
	/* shadow neon */
	text-shadow: 0 0 10px var(--neongreen);
}

.nav-item:hover {
	color: var(--neongreen);
}

.navbar {
	background-color: var(--dark-blue);
	/* position: absolute; */
	z-index: 1020;
	display: flex;
	width: 100vw;
}

.container-fluid {
	padding: 0px;
}

/* banner */
.banner-portfolio {
	width: 8vw;
}

.banner-portfolio-mobile {
	width: 20vw;
}


.banner-name-panel {
	top: 15vw;
	width: 100vw;
}

.banner-bg {
	z-index: -1;
	width: 100vw;
}

.banner-bg-mobile {
	z-index: -1;
	width: 100vw;
	height: 105vw;
}

.banner-profile {
	/* margin-top: 9vw; */
	margin-left: -6vw;
	transform: rotate(-4deg);
}

.banner-profile-mobile {
	/* margin-top: 9vw; */
	margin-left: 4vw;
	transform: rotate(-4deg);
}

/* work-exp */
#ex1 {
	gap: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#ex1 .nav-item {
	border-radius: 8px !important;
	background-color: rgba(65, 225, 119, 5%);
}

#ex1 .nav-link {
	height: 44px;
	border-color: none !important;
	border-bottom: 0px !important;
	border-radius: 8px !important;
	color: var(--white) !important;
	font-size: 14px;
	font-weight: bold;
	background-color: var(--neongreen) 50%;
}

#ex1 .nav-link.active {
	background-color: var(--neongreen) !important;
	color: var(--dark-blue) !important;
}

#ex1 .nav-link:hover {
	background-color: var(--neongreen) !important;
	color: var(--dark-blue) !important;
}

.work-exp {
	border-left: var(--neongreen) 1px solid;
	padding: 0px 40px;
}

.work-exp-date {
	font-size: 14px;
	color: var(--yellow);
}

.custon-bullet {
	height: 30px;
	width: 8px;
	background-color: var(--neongreen);
	position: absolute;
	left: -5px;
}

.project-card {
	background: linear-gradient(rgba(65, 225, 119, 0.05),
			rgba(65, 225, 119, 0.05)) padding-box;
	border: 2px solid transparent;
	padding: 30px;
	cursor: pointer;
}

.project-card:hover {
	border: 2px solid var(--neongreen);
}


.btn-neongreen:hover {
	background-color: var(--dark-blue);
	color: var(--neongreen);
	border: 1px solid var(--neongreen);
}


#programming-tools {
	background: linear-gradient(rgba(65, 225, 119, 0.05), rgba(65, 225, 119, 0.05)) padding-box;
	border-top: 1px solid var(--neongreen);
	border-bottom: 1px solid var(--neongreen);
	margin: 50px 0px;
	padding: 50px 0px;
}

.project-tools {
	background-color: white;
	border-radius: 20px;
	width: 88px;
	height: 64px;
	display: flex;

	justify-content: center;
	align-items: center;
	margin: 14px;
	border: 2px solid #41e177;
}

/* the slides */
.slick-slide {
	margin: 0 15px;
}

/* the parent */
.slick-list {
	margin: 0 -15px;
}
.nes-btn.is-success {
    color: var(--dark-blue);
    background-color: var(--neongreen)
}

/* .line-under-head{
	height: 20px;
    color: var(--);
    background-color: var(--white);
    width: 300px;
    position: absolute;
    left: 150px;
    top: 26px;
    z-index: -1;
} */

.our-client-logo{
	height: 30px;
}

input[type="text"],
input[type="email"]
 {
	background-color: var(--dark-blue);
    border: none;
	border-radius: 0px;
    border-bottom: solid 1px var(--neongreen);
    height: 42px;
	box-sizing: border-box;
    color: white;
}
textarea.form-control{
	background-color: var(--dark-blue);
	border: none;
	border-radius: 0px;
	border-bottom: solid 1px var(--neongreen);
	box-sizing: border-box;
	color: white;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea.form-control:focus
{
	outline: none;
	box-sizing: border-box;
	background-color: var(--dark-blue);
    border: none;
    border-bottom: solid 1px var(--neongreen);
    color: white;
}


@media (max-width: 1024px ) {
    .H1-112-ExtraBold {
        font-size: 40px; /* ปรับขนาดฟอนต์สำหรับมือถือ */
        line-height: 5vw; /* ปรับ line-height ตามต้องการ */
    }

    .H2-64-ExtraBold {
        font-size: 36px; /* ปรับขนาดฟอนต์สำหรับมือถือ */
        line-height: 5vw; /* ปรับ line-height ตามต้องการ */
    }

    .H3-48-ExtraBold {
        font-size: 20px; /* ปรับขนาดฟอนต์สำหรับมือถือ */
    }

    .H4-32-ExtraBold {
        font-size: 18px; /* ปรับขนาดฟอนต์สำหรับมือถือ */
    }

    .H5-24-ExtraBold {
        font-size: 16px; /* ปรับขนาดฟอนต์สำหรับมือถือ */
    }

    .H6-20-ExtraBold {
        font-size: 14px; /* ปรับขนาดฟอนต์สำหรับมือถือ */
    }
}