/* ================= SECTION ================= */
    .profile-section {
        background: #000;
        padding: 64px 80px;
    }

    /* ================= CONTAINER ================= */
    .profile-container {
        max-width: 1280px;
        margin: auto;
        background: #232323;
        border-radius: 32px;
        padding: 40px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    /* ================= AVATAR ================= */
    .profile-avatar {
        display: flex;
        justify-content: center;
    }

    .avatar-wrapper {
        width: 140px;
        height: 140px;
        background: #f1f1f1;
        border-radius: 50%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .edit-icon {
        position: absolute;
        bottom: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
    }

    /* ================= FORM ================= */
    .profile-form {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .form-group.full {
        grid-column: span 0.5;
    }

    label {
        font-size: 14px;
        color: #fff;
        margin-bottom: 6px;
        display: block;
    }

    label span {
        color: red;
    }

    input,
    select {
        width: 100%;
        background: #3B3B3B;
        border: none;
        border-radius: 14px;
        padding: 14px 16px;
        color: #fff;
        font-size: 14px;
    }

    /* .stateop {
    border-radius: 14px;
} */


    input:focus,
    select:focus {
        outline: none;
    }

    /* ================= BUTTON ================= */
    .submit-btn {
        width: 100%;
        padding: 16px;
        border-radius: 14px;
        border: none;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        background: linear-gradient(101.67deg,
                #93C3FD 0%,
                #7D86ED 45.89%,
                #5B63ED 100%);
    }

    /* ================= RESPONSIVE ================= */

    /* <=1024px (same as desktop padding) */
    @media (max-width: 1024px) {
        .profile-section {
            padding: 56px 80px;
        }
    }

    /* Tablet */
    @media (max-width: 768px) {
        .profile-section {
            padding: 56px 32px;
        }

        .form-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .form-group.full {
            grid-column: span 2;
        }
    }

    /* Mobile */
    @media (max-width: 576px) {
        .profile-section {
            padding: 48px 20px;
        }

        .form-grid {
            grid-template-columns: 1fr;
        }

        .form-group.full {
            grid-column: span 1;
        }
    }