/* --- CONTACT SECTION --- */
.contact-section {
    width: auto;
    /* Match sidebar offset */
    margin-left: 100px; 
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-top: -200px;
}

/* Section Title (Centered) */
.contact-section .section-title {
    margin-bottom: 40px;
    text-align: center;
}

/* --- THE DARK CARD --- */
.contact-card {
    background-color: #040914; /* Dark Navy Card */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 50px;
    width: 100%;
    max-width: 700px; /* Limits width like the image */
    position: relative; /* Container for absolute icons */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* --- FORM ELEMENTS --- */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    z-index: 2; /* Sit above icons */
    position: relative;
}

label {
    font-family: 'Blinker', sans-serif;
    color: #FFFFFF;
    font-size: 14px;
}

.red-star {
    color: #F41414;
    margin-left: 3px;
}

input, textarea {
    background-color: #151B2D; /* Slightly lighter dark for inputs */
    border: none;
    border-radius: 8px;
    padding: 12px 15px;
    color: #B0B0B0;
    font-family: 'Blinker', sans-serif;
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

input:focus, textarea:focus {
    border: 1px solid #F41414; /* Red border on focus */
}

/* --- SUBMIT BUTTON --- */
.form-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    z-index: 2;
    position: relative;
}

.submit-btn {
    background-color: #C43838; /* Muted Red */
    color: white;
    border: none;
    padding: 10px 40px;
    border-radius: 20px;
    font-family: 'Blinker', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
    border: 1px solid white; /* Thin white border like design */
}

.submit-btn:hover {
    background-color: #F41414; /* Bright red on hover */
}

/* --- BACKGROUND ICONS (DECORATION) --- */
.bg-icon {
    position: absolute;
    color: #F41414;
    opacity: 0.05; /* Very faint */
    font-size: 60px;
    pointer-events: none; /* Make sure they don't block clicks */
    z-index: 1;
}

/* Positioning specific icons around the card */
.icon-1 { top: 10px; right: -20px; transform: rotate(15deg); }
.icon-2 { bottom: 10px; left: -20px; font-size: 80px; }
.icon-3 { bottom: 20px; right: -1px; }
.icon-4 { top: 1%; left: -10px; }

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
    .contact-section { margin-left: 0; }
    .contact-card { padding: 30px 20px; }
    .form-row { flex-direction: column; gap: 0; } /* Stack names on mobile */
}