*	{
	box-sizing: border-box;
	margin: 0;
	padding:0;
	}
	
	
	nav {
		height:80px;
		background: #fdcc04;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:  0rem calc((100vw-130px)/2);
	}
	
	.logo {
		color: #000;
		font-size: 2rem;
		font-weight: bold;
		font-style: italic;
		padding: 0 2rem;
		
	}
	
	nav a {
			text-decoration: none;
			color: blue;
			padding: 0 1.5rem;
	}
	
	nav a:hover {
		color: #fff;
	}
	
	.hero {
		background: #00ff00;
	}
	
	.hero-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		height: 54vh;
		padding: 3rem calc((100vw - 1300px) / 2);
	}
	
	.aboutme-container {
		
		background: #00ff00;
		padding: 10px;
		max-width: 100%;
		text-align: left;
		height: 60vh;
		
	}
	
	.aboutme-container h1 {
		font-size: 2.5em;
		margin-bottom: 20px;
		color: #333;
  }

	.aboutme-container p {
		font-size: 1.1em;
		line-height: 1.8;
		color: #555;
  }

	button {
		padding: 1rem 3rem;
		font-size: 1rem;
		border: none;
		color: #fdcc04;
		background: #000;
		cursor: pointer;
		border-radius: 50px;
	}
		
	button:hover {
		background: #fff;
		color: #000;
	}
	
	.hero-image {
		width: 100%;
		height: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;	
		
	}
	.hero-image.anim {
		animation-delay: 1.5s; 
	}
	
	.column-left h1 {
		margin-bottom: 1rem;
		font-size: 3rem;
		
	}
	.column-left.anim {
		animation-delay: 1.0s; 
	}
	
	.column-left p {
		margin-bottom: 2rem;
		font-size: 1.5rem;
		line-height: 1.5;
	}
	
	.column-right {
		height: 90%;
		
	}
	
	.column-left {
  margin-left: calc((100vw - 1300px) / -2);
}
	
	
	.horizontal_line {
		width: 100%;
		margin: 0px;
		display:block;
		background: #fdcc04;	
		padding-bottom:35px;
	}
	
	.site-footer {
		position: relative;
		background-color: #222;
		color: #fff;
		text-align: center;
		padding: 35px 10px;
		position: relative;
		z-index: 1;
	}
	
	.site-footer a:hover {
		color: #ff0000;
	}
	
	.company-logo {
		background-color: #fdcc04;
		text-align: center; /* or center, depending on your goal */
		margin-top: 0px; /*This is the area at very top of component. */
		padding: 40px;
		
	}
	
	.company-logo img {
		display: inline-block;
		max-width: 50%; /* adjust as needed */
		height: auto;
		
	}
	
	.company-logo.anim{
		animation-delay: 2.0s;
	}
		
	.anim{
		opacity: 0;
		transform: translateX(-30px);
		animation: moveup 0.5s linear forwards;
	}
	@keyframes moveup{
		100%{
			opacity: 1;
			transform: translateX(0px);
		}
	}
	
	.formbody {
		margin: 0;
		padding: 0;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e8f5e9; /* soft green tint */
	}
	
	
	.form-container {
		background-color: #4caf50; /* rich green */
		padding: 20px;
		border-radius: 10px;
		font-size: 25px;
	}

	form {
		display: flex;
		flex-direction: column;
		gap: 5px;
		width: 300px;
		color: black;
	}
	
	.form-input {
		width: 250px;
		height: 35px;
		margin-bottom: 10px;
		font-size: 14px;
		padding: 6px;
	}

	.company-image {
		width: 22%;
	
	}
	
	.btnsignup-btn {
		display: flex;
		gap: 100px; /* Controls space between buttons */
	}