body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f4f7fb;
}

/* ✅ ONLY HERO SECTION STYLING */
.hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px 60px;
    position: relative;
    overflow: hidden;
}

    /* ✅ DOTTED BACKGROUND (sirf hero ke piche) */
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px);
        background-size: 20px 20px;
        z-index: 0;
    }

    /* ✅ LIGHT MOVING COLOR EFFECT */
    .hero::after {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        background: linear-gradient(120deg, #e6f7ff, #f0f8ff, #f6fff9);
        animation: moveBg 10s linear infinite;
        z-index: -1;
    }

@keyframes moveBg {
    0% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-10%, -10%);
    }

    100% {
        transform: translate(0,0);
    }
}

/* ✅ CONTENT ABOVE BG */
.left-box {
    width: 50%;
    position: relative;
    z-index: 1;
    animation: slideIn 1s ease;
}

/* ✅ FORM IMPROVEMENT (HEADER unaffected) */
.form-box {
    width: 380px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1;
    animation: fadeIn 1.2s ease;
}

/* ✅ INPUT EFFECT */
input, textarea {
    transition: 0.3s;
}

    input:focus, textarea:focus {
        border-color: #2cc295;
        box-shadow: 0 0 6px #2cc295;
        outline: none;
    }

/* ✅ BUTTON EFFECT */
button {
    transition: 0.3s;
}

    button:hover {
        transform: scale(1.05);
    }

/* ✅ ANIMATIONS */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* loho  ke liye*/

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .logo img {
        height: 80px;
    }