#color-1,
#color-2,
#color-3,
#color-4,
#color-5,
#color-6 {
	padding: 3px
}

.th,
ul {
	padding-bottom: 5px
}

.btn-hover,
.imgr,
.nav a {
	display: block
}

.th,
.title-text {
	font-weight: 700
}

.btn-hover,
.font-box,
.nav a {
	text-decoration: none
}

* * {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

body {
	background-color: #fff;
	margin-left: auto;
	margin-right: auto;
	width: 100%
}

#color-1 {
	background-image: linear-gradient(15deg, #ff86cd, #bde7ff)
}

#color-2 {
	background-image: linear-gradient(15deg, #f4f5b1, #f8b2cd)
}

#color-3 {
	background-image: linear-gradient(15deg, #b9ffd4, #fad899)
}

#color-4 {
	background-image: linear-gradient(15deg, #d9a1ff, #b5fffb)
}

#color-5 {
	background-image: linear-gradient(15deg, #b9faff, #fffbbe)
}

#color-6 {
	background-image: linear-gradient(15deg, #ffcb86, #bdfff6)
}

.nav_color {
	background-color: #830564
}

.head_tital {
	background-color: #2b274d;
	background-image: linear-gradient(15deg, #b33a80, #4a9ccc)
}

.tableborder {
	width: 100%;
	height: 100%;
	margin: auto 10px bottom;
	padding: 5px
}

.imgr,
.table {
	margin-left: auto;
	margin-right: auto
}

.box-1,
.box-2 {
	height: 100vmin;
	padding-left: 2px;
	padding-right: 0;
	font-family: 'Kumbh Sans', sans-serif;
	overflow: hidden
}

.box-1 {
	border: 1px solid #000;
	border-bottom: 0;
	min-height: 610px
}

.box-2,
.th {
	border: 1px solid #000
}

.box-2 {
	border-bottom: 0;
	max-height: 575px
}

.btn-hover,
.th {
	font-size: 5vmin;
	background-image: linear-gradient(10deg, #82d1f5, #39dfd7);
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	color: #fff;
	text-align: center
}

.table {
	max-width: 1024px;
	width: auto
}

ul {
	list-style-type: disc;
	padding-top: 5px;
	font-size: 2.4vmin;
	border-bottom: 1px solid #b4b1b1;
	margin: 2px
}

.tdm {
	width: 33.33%;
	border: 2px solid #fff;
	padding-right: auto;
	padding-left: auto
}

.imgr,
.th {
	width: 100%
}

.th {
	border-bottom: 0
}

.btn-hover {
	border: 1px solid #000;
	border-top: 0
}

.btn-hover:hover {
	background-image: linear-gradient(20deg, #1aa4e9, #29485a);
	color: #83ffff
}

.imgr {
	max-width: 2560x;
	height: auto
}

.nav {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding: 0;
	margin: 5px 0 0;
	list-style: none;
	background-color: #003e6b;
	overflow: hidden;
	font-family: Philosopher, sans-serif
}

.marquee-main,
.title-text {
	margin-top: 20px;
	width: 100%;
	max-width: 1024px
}

.marquee-container,
.marquee-main,
.site-logo,
.social-link-main,
.table-box,
.title-text {
	margin-left: auto;
	margin-right: auto
}

.nav :hover {
	background-color: #dad611
}

.nav-item {
	flex: 1 1 auto;
	text-align: center
}

.nav a {
	color: #fff;
	padding: 5px;
	white-space: nowrap;
	font-size: 18px;
	border-right: 2px solid #fff
}

.nav a:hover {
	color: #04263f
}

@media (max-width:600px) {
	.nav a {
		font-size: 10px;
		padding: 3px;
		border-right: 1px solid #fff
	}
}

.title-text {
	color: #940000;
	text-align: center;
	font-size: 3vmin
}

.bg-info,
.latest-news {
	color: #fff;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.marquee-main {
	padding: 1px;
	border-radius: 8px;
	background-image: linear-gradient(90deg, rgba(9, 67, 105, .856), rgba(7, 16, 146, .74))
}

.bg-info {
	margin-bottom: 2px;
	margin-top: 2px;
	padding: 2px
}

.marquee-container {
	margin-top: 20px;
	width: 100%;
	max-width: 1024px;
	font-size: 2.8vmin;
	display: flex;
	background-image: linear-gradient(15deg, rgba(14, 2, 68, .74), rgba(96, 112, 255, .856));
	align-items: center
}

.latest-news {
	white-space: nowrap;
	height: auto;
	align-items: center;
	font-size: 2.5vmin;
	padding: 3px;
	background-color: #a80000;
	border-right: 3px solid #000
}

.table-box {
	width: 100%;
	max-width: 1024px;
	max-height: 50%
}

.td-box {
	text-align: center;
	width: 25%;
	font-size: 2.5vmin;
	border: 1px solid #837e81;
	background-color: #569b9b;
	border-radius: 0
}

.site-logo {
	display: block;
	padding-top: 1px;
	padding-bottom: 0;
	width: 50px;
	height: 50px;
	max-width: 100%;
	border-radius: 17px;
	object-fit: cover;
	border: 2px solid #fff
}

.font-box {
	display: block;
	font-family: Kanit, sans-serif
}

.social-link-main {
  display: block;
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-bottom: 12px;
  border-bottom: #000000 solid 1px;
}

.social-link-btn {
  background-color: white;
  border-radius: 25px;
  padding: 12px 20px; /* Increased padding for larger touch target */
  height: auto;
  font-size: 16px; /* Increased font size for better readability */
  margin: 10px; /* Added margin between buttons */
  display: inline-block;
  width: auto;
  text-align: center;
}

.social-link-btn:hover,
a.social-link-btn:active {
  border: #000000 solid 2px;
  border-radius: 0px;
  transition: 500ms;
}

.social-link-btn a {
  display: block; /* Ensure the link takes the full space of the button */
  color: inherit; /* Inherit color from parent for consistent text color */
  text-decoration: none; /* Remove underline from links */
}

.social-link-btn i {
  font-size: 24px; /* Adjust icon size for better visibility */
}


#tr-sec {
	width: auto;
	height: 20px
}

.footer_one {
	width: 100%;
	max-width: 1024px;
	height: 170px;
	min-height: 150px;
	margin-top: 0;
	background-image: linear-gradient(360deg, #38326d, #64b1d4);
	padding: 5px
}

.footer_2,
.footer_one1 {
	max-width: 1024px;
	height: 205px;
	margin-top: 30px
}

.about {
	color: #14045c;
	background-color: #ffffff4a;
	border-radius: 20px;
	padding-left: 10px;
	margin-bottom: 10px
}

.about_list {
	margin-bottom: 2px
}

.footer_one1 {
	float: right;
	width: 80%;
	background-image: linear-gradient(210deg, #afdbf1, #a6c0cf);
	padding: 10px
}

.footer_2 {
	float: left;
	width: 20%;
	min-height: 150px;
	background-image: linear-gradient(360deg, #283166, #93d7f7);
	padding: 20px
}

.footer_2 img {
	border-radius: 100px;
	width: 100%;
	height: auto;
	max-height: 150px
}

.social-media-icons {
	text-align: center;
	margin-top: 25px;
	color: #fff;
	float: right;
	margin-right: 5%;
	padding-right: 15px
}

.social-media-icons a {
	text-decoration: none;
	color: #fff
}
.box-one-container {
	display: flex;
   	gap: 6px;
	max-width: 1024px;
	margin: 6px;
	justify-content: space-between;
}

.form-card {
	flex: 1 1 24%; /* Ensures 4 cards fit in one line */
	height: 60px;
	border-radius: 8px;
	border: white solid 2px;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: transform 0.2s;
	color: #ffffff; /* Text color */
	font-family: Kanit,sans-serif;
	

	
}

/* Different background colors with high contrast */
	   .card1 { background-color: rgba(231, 172, 9, 0.17); } /* Transparent Yellow */
.card2 { background-color: rgba(178, 34, 34, 0.21); } /* Transparent Red */
.card3 { background-color: rgba(34, 139, 34, 0.18); } /* Transparent Green */
.card4 { background-color: rgba(139, 69, 49, 0.19); } /* Transparent Brown */
.card5 { background-color: rgba(46, 139, 86, 0.25); } /* Transparent Sea Green */
.card6 { background-color: rgba(105, 90, 205, 0.23); } /* Transparent Slate Blue */
.card7 { background-color: rgba(210, 105, 30, 0.2); } /* Transparent Chocolate */
.card8 { background-color: rgba(70, 154, 180, 0.21); } /* Transparent Steel Blue */


.form-card:hover {
	transform: translateY(-5px);
	
}

.button {
	text-decoration: none;
	color: #ffffff; /* Ensures text is readable */
}

/* Responsive adjustments */
@media (max-width: 600px) {
	.form-card {
		flex: 1 1 24%; /* Keep layout compact */
		font-size: 12px; /* Adjust for readability */
		
	}
}

@media (max-width: 480px) {
	.form-card {
		flex: 1 1 24%; /* Single card per row on very small screens */
		font-size: 12px;
	}
}