@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');
body{ 
	
	margin:0;
	/*box-sizing: border-box;*/
	font-family: 'Prompt',Tahoma,sans-serif,Kanit; 
	background-color:#fefae0 ; /*#D4AF37;#fffdf0;#F5F5DC #f8f9fa*/
	/*font-size:16px;*/
}

	.navbar{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		z-index:1000;
		display:flex;
		box-sizing:border-box;
		justify-content:space-between;
		align-items:center;
		background-color:#e0c878; /*#e6b84e #f5e6b0 #e0c878 #e6d8a2#e0d4aa;  #1a1a1a ดำเข้ม, #f5c518 ทอง , #2c2c2c เทาเข้ม, #0a1f44 นำเงินกรม #e0d4aa */
		padding:12px 40px;
		box-shadow:0 2px 6px rgba(0,0,0,0.08);
		border-bottom:1px solid #e6b84e;
		color:#1a1a1a;
	}
	.navbar nav{
			display:flex;
			flex-wrap:wrap;
			max-width:100%;
			overflow-x:auto;
	}

	.logo img{
		max-height:50px;
		height:auto;
		width:auto;
	}
	.menu-toggle{
		font-size:24px;
		background:none;
		border:#ffffff;
		display:none;
		cursor:pointer;
	}
	.nav-links{
		list-style:none;
		display:flex;
		gap:25px;
	}
	.nav-links li a{
		text-decoration:none;
		color:#1a1a1a;
		font-size:16px;
		transition:color 0.3s ease;
		margin:0 15px;
		font-weight:500;
		margin-left:20px;
		white-space:mowrap;
	}
	.nav-links li a:hover{
		color:#d4af37;
	}
	/* Hamburger Button */
	.menu-toggle{
		display:none;
		flex-direction:column;
		cursor:pointer;
		width:30px;
		height:25px;
		justify-content:space-between;
	}
	.menu-toggle span{
		height:4px;
		background:#000;
		border-radius:2px;
		transition:0.4s;
	}
	/* Animation when active */
	.menu-toggle.active span:nth-child(1){
		transform:rotate(45deg) translate(5px, 5px);
	}
	.menu-toggle.active spanLnth-child(2){
		opacity:0;
	}
	.menu-toggle.active span:nth-child(3){
		transform:rotate(-45deg) translate(6px, -6px);
	}
	main{
		padding:40px 20px;
		background-color:#fefae0;  /*  #fff8dc  */
		padding-top:60px;
	}
	.hero{
		margin-top:10px;
		text-align:center;
		padding:100px 20px;
		/*background:linear-gradient(to right, #0a1f44,#1e3a8a);*/
		/*background:linear-gradient(135deg,#fff8dc 0%,#d4af37 40%, #1a1a1a 100%)  #fdf5d2 40% ,#f5e6b0 100%*/
		background:linear-gradient(to bottom,#fefae0 0%,#ffffff 100%);
		color:#1a1a1a;
	}
	.hero h1{
		font-size:36px;
		margin-bottom:20px;
		color:#4a4a4a; /* #d4af37*/
		text-shadow:1px 1px 2px rgba(0,0,0,0.1);
	}
	.hero p{
		font-size:20px;
		margin-bottom:30px;
		color:#555555;
		max-width:700px;
		margin:0 auto;
	}
	.price-banner{
		margin:30px auto 20px;
		max-width:600px;
	}
	.price-banner iframe{
		width:100%;
		height:85px;
		border:none;
		background-color:transparent;
	}
	
	.cta-button{
		background-color:#d4af37;
		color:#1a1a1a;
		 padding:12px 30px;
		text-decoration:none;
		font-weight:bold;
		border-radius:6px;
		transition:background-color 0.2s ease;
		font-size:18px;
		margin-top:30px;
		cursor:pointer;
		text-shadow:0 4px 10px rgba(212, 175, 55, 0.3);
		transition:transform 0.2s ease, background-color 0.3s ease;
	}
	.cta-button:hover{
		background-color:#c19e2b;
		transform:scale(1.05);
	}
	.features{
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
		/*grid-template-columns:repeat(3,1fr);*/
		gap:30px;
		padding:40px 20px;
		background-color:#fefae0;
		/* max-width:1200px;
		margin:0 auto; */
	}
	.feature-box{
		background-color:#ffffff;
		border:1px solid #d4af37;
		border-radius:8px;
		padding:25px;
		box-shadow:0 4px 10px rgba(0,0,0,0.05);
		transition:transform 0.3s ease;
		text-align:center;
	}
	.feature-box:hover{
		transform:translateY(-5px);
	}
	.feature-box h2{
		color:#1f2a44;   /*#d4af37*/
		margin-bottom:10px;
		font-size:20px;
	}
	.feature-box p{
		color:#333333;
		font-size:16px;
		line-height:1.5;
	}
	.partners{
		background-color:#ffffff;
		padding:60px 20px;
		text-align:center;
	}
	.partners h2{
		color:#d4af37;
		font-size:32px;
		margin-bottom:40px;
	}
	.partner-logos{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		gap:30px;
	}
	.partner-logos img{
		max-height:60px;
		max-width:150px;
		object-fit:contain;
		filter:grayscale(100%);
		opacity:0.8;
		transition:filter 0.3s ease,opacity 0.3s ease;
	}
	.partner-logos img:hover{
		filter:grayscale(0%);
		opacity:1;
	}
	.graph-section{
		background-color:#fefae0;
		padding:10px 15px;
		text-align:center;
	}
	.graph-section h2{
		font-size:32px;
		color:#d4af37;
		margin-bottom:40px;
	}
	.graph-group{
		margin-bottom:50px;
	}
	
	.graph-pair{
		display:grid;
		grid-template-columns:repeat(2,1fr);
		gap:30px;
		margin-bottom:20px;
	}
	.graph-pair iframe{
		width:100%;
		height:600px;
		border:1px solid #d4af37;
		border-radius:8px;
		box-shadow:0 4px 10px rgba(0,0,0,0.05);
	}
	.graph-link{
		display:inline-block;
		color:#d4af37;
		font-weight:500;
		text-decoration:none;
		transition:color 0.3s ease;
	}
	.graph-link:hover{
		color:#c19e2b;
	}
	
	.site-footer{
		/*background-color:#1a1a1a;*/
		color:#cccccc;
		padding:40px 20px 20px;
		font-family:'Pormpt',sans-serif;
		background:linear-gradient(to top,#1a1a1a 0%,#3a2f1d 100%);

	}
	.footer-container{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-betwwen;
		/* max-width:1200px;
		margin:0 auto;*/
		gap:20px; 
	}
	.footer-about,
	.footer-links,
	.footer-contact{ 
		flex:1 1 250px;
	}
	.footer-about h3{
		color:#f5c518;
		margin-bottom:10px;
	}
	
	.footer-links h4,
	.footer-contact h4{
		margin-bottom:10px;
		color:#d4af37;
	}
	
	.footer-links ul{
		list-style:none;
		padding:0;
	}
	
	.footer-links ul li{
		margin-bottom:8px;
	}
	.footer-links ul li a{
		color:#cccccc;
		text-decoration:none;
		transition:color 0.3s ease;
	}
	.footer-links ul li a:hover{
		color:#d4af37;
	}
	.footer-contact p{
		margin:5px 0;
		
	}
	.footer-bottom{
		text-align:center;
		margin-top:30px;
		border-top:1px solid #444;
		padding-top:15px;
		font-size:14px;
		color:#999999;
	}
	
@media (max-width: 768px) {
	.graph-pair{
		grid-template-columns:1fr;
	}
	.graph-pair iframe{
		height:600px;
	}
	.menu-toggle{
		display:flex;
	}
	.nav-links{
		flex-direction:column;
		position:absolute;
		top:60px;
		right:0;
		background-color:#fff8dc;
		width:100%;
		display:none;
		padding:20px 0;
	}
	.nav-links.show{
		display:flex;
	}
	.nav-links li{
		text-align:center;
		padding:10px 0;
	}
	.footer-container{
		/*flex-direction:column;
		text-align:center;
		gap:10px;
		padding:20px 10px;*/
		display:block;
		padding:20px 15px;
	}
	.footer-about,
	.footer-links,
	.footer-contact{
		margin-bottom:30px;
		height:auto;
	}

}