.contact{

    padding:100px 10%;

}

.contact-wrapper{

    max-width:850px;
    margin:auto;

}

.contact-form{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.contact-form input,
.contact-form textarea{

    background:#0d1220;

    border:1px solid #28416a;

    color:white;

    padding:18px;

    border-radius:12px;

    font-size:16px;

    transition:.3s;

}

.contact-form input:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:#29c7ff;

    box-shadow:0 0 15px rgba(41,199,255,.35);

}

.contact-form textarea{

    resize:vertical;

}

.contact-form button{

    background:linear-gradient(90deg,#13a9ff,#3f6fff);

    color:white;

    border:none;

    padding:18px;

    border-radius:50px;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

.contact-form button:hover{

    transform:translateY(-3px);

    box-shadow:0 0 20px rgba(19,169,255,.5);

}

.contact-header {
    text-align: center;
    margin-bottom: 35px;
}

.contact-logo {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto 25px;
    filter: drop-shadow(0 0 22px rgba(35, 187, 255, 0.35));
}

.contact-intro {
    max-width: 650px;
    margin: -20px auto 30px;
    color: #b9c7dc;
    font-size: 17px;
    line-height: 1.7;
}

.contact-form .row {
    display: flex;
    gap: 20px;
}

.contact-form .form-group {
    width: 100%;
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    color: #7fcfff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    margin-bottom: 0;
}

.contact-form button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.button-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: contactSpin 0.8s linear infinite;
}

@keyframes contactSpin {
    to {
        transform: rotate(360deg);
    }
}

.recaptcha-notice {
    margin: 18px 0 0;
    text-align: center;
    color: #778aa6;
    font-size: 12px;
    line-height: 1.6;
}

/* Hide the honeypot without using display:none */
.website-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#formMessage {
    min-height: 24px;
    margin-top: 22px;
    text-align: center;
    font-weight: 600;
}

#formMessage.success {
    color: #54ef91;
}

#formMessage.error {
    color: #ff7272;
}

@media (max-width: 768px) {
    .contact-form .row {
        flex-direction: column;
        gap: 0;
    }

    .contact-form {
        padding: 28px 20px;
    }

    .contact-logo {
        max-width: 290px;
    }
}

.contact-nav{
    text-align:center;
    margin-bottom:30px;
}

.home-button{

    display:inline-block;

    padding:12px 28px;

    border:2px solid #2ac7ff;

    border-radius:40px;

    color:#2ac7ff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

    background:rgba(13,18,32,.6);

    backdrop-filter:blur(10px);

    box-shadow:0 0 15px rgba(42,199,255,.2);

}

.home-button:hover{

    background:#2ac7ff;

    color:#05070d;

    box-shadow:0 0 25px rgba(42,199,255,.6);

    transform:translateY(-2px);

}