/* RESET (FIXED) */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial;
background: #0c0c1c;
color: white;
}

/* HEADER */
header {
display: flex;
justify-content: space-between;
padding: 20px 10%;
background: #111132;
position: sticky;
top: 0;
z-index: 100;
}

nav a {
color: white;
margin-left: 20px;
text-decoration: none;
}

/* HERO */
.hero {
min-height: 100vh;
display: flex;
align-items: center;   /* 👈 FIX: center vertically */
justify-content: center;
padding-top: 0;
}

.hero-container {
display: flex;
justify-content: space-between;
align-items: center;   /* 👈 IMPORTANT */
width: 90%;
gap: 40px;
flex-direction: row-reverse;
}

/* LEFT FORM */
.hero-left {
width: 40%;
background: #1b1b3a;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(247, 183, 49, 0.2);
}

.hero-left form {
display: flex;
flex-direction: column;
gap: 12px;
}

/* SAME SIZE INPUTS */
.hero-left input,
.hero-left select {
width: 100%;
height: 40px;
padding: 10px;
border: none;
border-radius: 5px;
box-sizing: border-box;
}

/* BIGGER TEXTAREA */
.hero-left textarea {
width: 100%;
height: 100px;
padding: 10px;
border: none;
border-radius: 5px;
resize: none;
box-sizing: border-box;
}

/* BUTTON */
.hero-left button {
background: #f7b731;
border: none;
padding: 10px;
cursor: pointer;
font-weight: bold;
border-radius: 5px;
transition: 0.3s;
}

.hero-left button:hover {
background: #f5a623;
}

/* INPUT FOCUS EFFECT */
.hero-left input:focus,
.hero-left select:focus,
.hero-left textarea:focus {
outline: none;
box-shadow: 0 0 5px rgba(247, 183, 49, 0.6);
}

/* RIGHT TEXT */
.hero-right {
width: 50%;
position: relative;
padding: 40px;
overflow: visible;
}

.hero-right h2 {
font-size: 40px;
position: relative;
z-index: 1;
}

.hero-right p {
position: relative;
z-index: 1;
}

/* BACKGROUND IMAGE */
.bg-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

width: 80%;
max-width: 400px;
height: auto;

opacity: 0.3;
z-index: 0;
pointer-events: none;

filter: drop-shadow(0 0 20px rgba(247, 183, 49, 0.4));
}

/* SERVICES */
section {
padding: 80px 10%;
text-align: center;
}

.service-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 40px;
}

.card {
background: #1b1b3a;
padding: 20px;
border-radius: 10px;
transition: 0.3s;
}

.card:hover {
transform: translateY(-10px);
}

/* FOOTER */
footer {
text-align: center;
padding: 20px;
background: #111132;
}

/* RESPONSIVE */
@media(max-width: 768px) {

.hero-container {
flex-direction: column;
}

.hero-left,
.hero-right {
width: 100%;
}

.hero-right {
text-align: center;
}

}