<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>intohost new document title</title>
</head>
<body>
<p>[/* Reset and base styles */* {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; box-sizing: border-box;}<br />body {&nbsp; &nbsp; font-family: 'Arial', sans-serif;&nbsp; &nbsp; line-height: 1.6;&nbsp; &nbsp; color: #333;&nbsp; &nbsp; background-color: #f8f8f8;}<br />/* Header styles */header {&nbsp; &nbsp; background-color: #00732f;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; padding: 1rem 0;}<br />nav {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; max-width: 1200px;&nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; padding: 0 2rem;}<br />.logo {&nbsp; &nbsp; font-size: 2rem;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; color: #fff;}<br />nav ul {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; list-style: none;}<br />nav ul li {&nbsp; &nbsp; margin-left: 1.5rem;}<br />nav ul li a {&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; font-weight: bold;}<br />/* Main content styles */main {&nbsp; &nbsp; max-width: 1200px;&nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; padding: 2rem;}<br />#hero {&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; padding: 4rem 0;&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}<br />#hero h1 {&nbsp; &nbsp; font-size: 3rem;&nbsp; &nbsp; margin-bottom: 1rem;&nbsp; &nbsp; color: #00732f;}<br />#hero p {&nbsp; &nbsp; font-size: 1.2rem;&nbsp; &nbsp; margin-bottom: 2rem;}<br />.cta-button {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; background-color: #c4161c;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; padding: 0.75rem 1.5rem;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; border-radius: 5px;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; transition: background-color 0.3s ease;}<br />.cta-button:hover {&nbsp; &nbsp; background-color: #a11217;}<br />#features {&nbsp; &nbsp; margin-top: 4rem;}<br />#features h2 {&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; margin-bottom: 2rem;&nbsp; &nbsp; color: #00732f;}<br />.feature-grid {&nbsp; &nbsp; display: grid;&nbsp; &nbsp; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));&nbsp; &nbsp; gap: 2rem;}<br />.feature {&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; padding: 1.5rem;&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}<br />.feature h3 {&nbsp; &nbsp; color: #00732f;&nbsp; &nbsp; margin-bottom: 1rem;}<br />#about {&nbsp; &nbsp; margin-top: 4rem;&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; padding: 2rem;&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}<br />#about h2 {&nbsp; &nbsp; color: #00732f;&nbsp; &nbsp; margin-bottom: 1rem;}<br />/* Footer styles */footer {&nbsp; &nbsp; background-color: #00732f;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; padding: 2rem 0;}<br />.footer-content {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; max-width: 1200px;&nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; padding: 0 2rem;}<br />.footer-section {&nbsp; &nbsp; flex: 1;&nbsp; &nbsp; margin-right: 2rem;}<br />.footer-section h4 {&nbsp; &nbsp; margin-bottom: 1rem;&nbsp; &nbsp; color: #fff;}<br />.footer-section ul {&nbsp; &nbsp; list-style: none;}<br />.footer-section ul li {&nbsp; &nbsp; margin-bottom: 0.5rem;}<br />.footer-section ul li a {&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; text-decoration: none;}<br />.footer-bottom {&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; margin-top: 2rem;&nbsp; &nbsp; padding-top: 1rem;&nbsp; &nbsp; border-top: 1px solid rgba(255, 255, 255, 0.1);}]</p>
</body>
</html>