body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
color: #333;
}

.hero {
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
min-height: 100vh;
background: linear-gradient(to right, #e3f2fd, #fff);
}

.hero-content {
display: flex;
flex-direction: row;
align-items: center;
max-width: 1200px;
gap: 60px;
flex-wrap: wrap;
}

.hero-text {
flex: 1;
min-width: 300px;
}

.hero-text h1 {
font-size: 3em;
margin-bottom: 20px;
color: #1e88e5;
}

.hero-text p {
font-size: 1.2em;
margin-bottom: 30px;
color: #555;
}

.hero-text a {
display: inline-block;
background-color: #1e88e5;
color: white;
padding: 14px 28px;
border-radius: 30px;
text-decoration: none;
font-size: 1em;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}

.hero-text a:hover {
background-color: #1565c0;
}

.hero-image {
flex: 1;
min-width: 300px;
}

.hero-image img {
width: 100%;
max-width: 500px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
.hero-content {
flex-direction: column-reverse;
text-align: center;
}

.hero-text h1 {
font-size: 2.5em;
}

.hero-text a {
padding: 12px 24px;
}
}
</style>
</head>
<body>

<section class=”hero”>
<div class=”hero-content”>
<div class=”hero-text”>
<h1>Discover the Future</h1>
<p>Experience innovative technology and design that helps shape tomorrow. Let’s create something amazing together.</p>
<a href=”#get-started”>Get Started</a>
</div>
<div class=”hero-image”>
<img src=”https://source.unsplash.com/featured/?technology,future” alt=”Futuristic scene” />
</div>
</div>
</section>

</body>
</html>