/* Base styles */
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #2B1F0E;
  color: #F5F0E1;
}

/* Header section */
header {
  background: linear-gradient(to right, #1C140A, #2B1F0E);
  padding: 80px 20px;
  text-align: center;
}
.typewriter {
  overflow: hidden;
  border-right: 2px solid #FFD600;
  white-space: nowrap;
  animation: typing 4s steps(40, end), blink 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  50% { border-color: transparent }
}

h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.8rem;
  color: #FFA447;
  margin-bottom: 10px;
}

.tagline {
  font-size: 1.2rem;
  color: #A6C1B6;
  margin-bottom: 30px;
}

.btn {
  background-color: #FFA447;
  color: #2B1F0E;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #FFD600;
}

/* Container to wrap content */
.container {
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}

/* Section styles */
section {
  padding: 60px 20px;
  text-align: center;
}

h2 {
  font-family: 'Orbitron', sans-serif;
  color: #FFD600;
  margin-bottom: 20px;
}

/* Grid for services */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.service {
  background-color: #1C140A;
  padding: 20px;
  border: 1px solid #FFA447;
  border-radius: 6px;
  font-size: 1.1rem;
}

/* Call-to-action section */
.cta {
  background-color: #A6C1B6;
  color: #2B1F0E;
}

.cta .btn {
  background-color: #2B1F0E;
  color: #FFA447;
}

.cta .btn:hover {
  background-color: #FFD600;
  color: #2B1F0E;
}

.terminal {
  font-family: monospace;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

/* Footer styles */
footer {
  background-color: #1C140A;
  color: #A6C1B6;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
}